$dm-normal: $color-transparent;
$dm-hover: $color-gray-130;
$dm-click: $color-gray-140;
$dm-active: #ffffff;
$dm-disabled: transparent;
$dm-disabled-hover: #f0f1f4;

.DeepMenu {
  $this: &;

  margin-bottom: 20px;

  &__inner {
    background: $color-gray-120;
    border-radius: 128px;
    display: flex;
    padding: 4px;
    height: 40px;
  }

  &__item {
    @extend .Font__body--20;
    @extend .Font__color--text;

    position: relative;
    display: flex;
    align-items: center;
    border-radius: 128px;
    padding: 4px 16px 0 16px;
    background: $dm-normal;
    transition: background-color $motion-speed-quick $motion-quint-easeinout,
      box-shadow $motion-speed-quick $motion-quint-easeinout,
      color $motion-speed-quick $motion-quint-easeinout;

    // Vertical segment divider
    &:not(:first-child)::before {
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: 0;
      width: 1px;
      height: 8px;
      border-radius: 128px;
      background: $color-gray-100;
      transition: opacity $motion-speed-quick $motion-quint-easeinout;
    }

    // Hovering over a menu item
    &:hover {
      cursor: pointer;
      background: $dm-hover;

      // Hide that item's divider...
      &::before {
        opacity: 0;
      }

      // ...and the adjacent one
      & + #{$this}__item::before {
        opacity: 0;
      }
    }

    // Overriding global anchor hover
    @at-root a#{&}:hover,
      a#{&}:active {
      @extend .Font__color--text;
    }

    // On click
    &:active {
      background: $dm-click;
    }

    // Currently selected menu item
    &--active {
      z-index: 1; // So the shadow is above the next sibling
      background: $dm-active;
      box-shadow: $shadow-near;
      @extend .Font__color--active;

      &:hover {
        background: $dm-active;
      }

      // Hide this item's divider...
      &::before {
        opacity: 0;
      }

      // ... and the adjacent one
      & + #{$this}__item::before {
        opacity: 0;
      }
    }

    // Disabled menu item
    &--disabled {
      @extend .Font__color--lighter;

      &:hover {
        background: transparent;
        cursor: not-allowed;

        &::before {
          opacity: 1;
        }

        & + #{$this}__item::before {
          opacity: 1;
        }
      }
    }
  }
}