@use 'src/styles/abstracts' as *;

.Controls__container {
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;

  & > div {
    margin-bottom: 0.375rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.Controls__icon {
  color: $pico-70;
  font-size: 1.125rem;
  &.active {
    color: $primary-color;
  }
}

.Controls__anchor {
  height: 2.25rem;
  width: 2.25rem;
  display: flex;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease-out;
  border: 0.0625rem solid transparent;
  border-radius: $border-radius-main;

  &.active {
    background-color: $primary-color-10;

    &.outlined {
      border: $border-main-active;
    }
  }

  &.disabled {
    cursor: initial;
    i {
      color: $pico-50;
    }
    &:hover {
      background-color: transparent;
    }
  }

  &:hover {
    background-color: $pico-5;

    .icon-arrow-left {
      opacity: 1;
    }
  }
}

.Controls__anchor__arrow {
  width: 0.6875rem;
  height: 100%;
  position: absolute;
  left: -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &.opened {
    .icon-arrow-left {
      transform: rotate(180deg);
      color: $primary-color;
    }
  }

  .icon-arrow-left {
    transition: all 0.18s ease-out;
    color: $pico-70;
  }
}
