.ebs-sidebar {
  &__text {
    color: $sidebar-item-text-color;
    font-size: rem(14px);
    transition: $transition-time;
    padding: rem($gutter-size 27.5px $gutter-size 57.5px);

    a {
      padding: rem($gutter-size 27.5px $gutter-size 57.5px);
    }
  }

  &:not(.ebs-sidebar--toggled) &__item--collapsed.ebs-sidebar__item--has-options {
    background-color: rgba($sidebar-item-hover-background, 0.1);

    .ebs-sidebar__text,
    a,
    svg,
    & + .ebs-sidebar__suffix svg {
      color: $sidebar-item-text-color;
    }
  }

  &__item {
    @include text-ellipsis;
    position: relative;
    cursor: pointer;
    transition: $transition-time;
    display: flex;
    align-items: center;
    color: $sidebar-item-text-color;
    max-height: rem(44px);

    &__options &__item .ebs-sidebar__text {
      font-size: rem(12px);
      color: $sidebar-item-text-color;
    }

    &:hover,
    &--invert:hover,
    &--invert .ebs-sidebar__item--active:hover {
      & + .ebs-sidebar__suffix .ebs-icon {
        color: $sidebar-item-hover-color;
      }
    }

    .ebs-icon {
      color: $sidebar-item-text-color;
    }

    &.ebs-sidebar__toggler {
      margin-bottom: rem(10px);

      @include mq($until: small-desktop) {
        display: none;
      }
    }

    // item has no options
    &--invert:not(&--has-options):hover,
    &--invert .ebs-sidebar__item--active:not(&--has-options) {
      background-color: $sidebar-item-hover-background;
      color: $sidebar-item-hover-color;

      .ebs-sidebar__text,
      .ebs-icon {
        color: $sidebar-item-hover-color;
      }
    }

    &:hover:not(&--has-options),
    &--active:not(&--has-options) {
      background-color: $sidebar-item-hover-background;
      color: $sidebar-item-hover-color;

      .ebs-sidebar__text,
      .ebs-icon {
        color: $sidebar-item-hover-color;
      }
    }

    // item has options
    &--invert.ebs-sidebar__item--has-options:hover,
    &--invert.ebs-sidebar__item--has-options.ebs-sidebar__item--active:not(&--has-options) {
      background-color: $sidebar-item-hover-background;
      color: $sidebar-item-hover-color;

      .ebs-sidebar__text,
      .ebs-icon {
        color: $sidebar-item-hover-color;
      }
    }

    &--has-options:hover,
    &--active:not(&--has-options) {
      background-color: $sidebar-item-hover-background;
      color: $sidebar-item-hover-color;

      .ebs-sidebar__text,
      .ebs-icon {
        color: $sidebar-item-hover-color;
      }
    }
  }

  &__prefix .ebs-icon {
    position: absolute;
    left: rem(20px);
    top: 50%;
    transform: translateY(-50%);
    font-size: rem(18px);
  }

  &__suffix {
    .ebs-icon {
      position: absolute;
      right: rem(12px);
      top: calc(50% - 4px);
      font-size: rem(10px);
      transition: $transition-time;

      path {
        transition: $transition-time;
      }

      &.ebs-icon__left {
        transform: rotate(270deg) translateY(-50%);
      }

      &.ebs-icon__bottom {
        transform: rotate(180deg) translateY(-50%);
      }
    }
  }

  &__label.ebs-label__status-text {
    padding: rem(12px 16px 6px);
    margin: 0;
    color: $sidebar-item-text-color;
  }

  &__options &__text {
    padding-top: rem(5px);
    padding-bottom: rem(5px);
    padding-right: rem(10px);

    &:hover,
    &--active,
    &--invert:hover,
    &--invert.ebs-sidebar__item--active:hover {
      background-color: rgba($sidebar-item-hover-background, 0.7);

      .ebs-sidebar__text {
        color: $sidebar-item-hover-color;
      }
    }
  }

  &__options &__item &__prefix {
    display: none;
  }
}
