/* Status Switcher */
/* TODO: check is it used at any of our current projects? */

.status-switcher {
  display: block;
  font-size: 12px;
  font-weight: 500;
  height: 36px;
  padding: 10px 10px;
  cursor: pointer;
  border-radius: 50px;
  color: var(--neutral-outline-variant-color, #c4c6d0);
  &:hover {
    background: #ececec;
  }
}

/* Status Filter */

.status-dropdown {
  margin-top: 9px;
}

.status-dropdown > .active > a,
.status-dropdown > .active > a:focus,
.status-dropdown > .active > a:hover {
  color: var(--neutral-on-main-neutral-color, #1a1c1e);
  background-color: var(--neutral-outline-variant-color, #c4c6d0);
}

.status-dropdown > li {
  margin-bottom: 1px;
}

.status-dropdown > li:last-child {
  margin-bottom: 0;
}
/* Status Icons */

.status {
  color: #333;
}

.status > i.status-icon {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 11px;
  background: var(--neutral-outline-variant-color, #c4c6d0);
  overflow: hidden;
  position: relative;
  margin-right: 10px;
}

.status.status-all > i.status-icon {
  background: none;
}

.status.status-all > i.status-icon:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 8px;
  background: var(--themePrimButtonsBg-color, #005bc0);
}

.status.status-all > i.status-icon:after {
  content: '';
  display: block;
  position: absolute;
  left: 8px;
  bottom: 0px;
  top: 0;
  width: 8px;
  background: var(--neutral-outline-variant-color, #c4c6d0);
}

.status.status-draft {
  color: #ffdb13;
}

.status.status-draft > i.status-icon {
  background: #ffdb13;
}

.status.status-pending {
  color: #ff9c00;
}

.block-item.status-pending {
  border-top-color: #ff9c00;
}

.status.status-pending > i.status-icon {
  background: #ff9c00;
}

.status.status-declined {
  color: #fd5249;
}

.status.status-declined > i.status-icon {
  background: #fd5249;
}

.status.status-approved,
.status.status-running {
  color: #38ce9f;
}

.block-item.status-approved {
  border-top-color: #38ce9f;
}

.status.status-approved > i.status-icon,
.status.status-running > i.status-icon {
  background: #c4c6d0;
}

.status.status-paused > i.status-icon {
  background: var(--neutral-outline-variant-color);
}

.status.status-paused > i.status-icon:after,
.status.status-paused > i.status-icon:before {
  content: '';
  display: block;
  width: 2px;
  height: 6px;
  position: absolute;
  left: 5px;
  top: 5px;
  background: var(--neutral-on-main-neutral-color);
  border-radius: 1px;
}

.status.status-paused > i.status-icon:after {
  left: 9px;
}

.table-list-item:hover .status-switcher-allow {
  color: #38ce9f;
}

.table-list-item:hover .status-switcher-block {
  color: #fb463a;
}
