@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  .menu-item {
    &__title {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    &__button-title {
      border: none;
      padding: 0;
      background: none;
      &:hover {
        background: none;
        color: var(--primary-color);
      }
    }
    a[href] {
      text-decoration: none;
      color: var(--gray-color);
      &.menu-item--selected {
        color: var(--primary-color);
      }
      &.menu-item--selected_parent {
        font-weight: bold;
      }
    }
    &__chevron {
      [class*="utds-icon-after-"]::after {
        font-size: 0.65rem;
        line-height: 0.5;
      }
      &--open {
        transform: rotate(90deg);
      }
    }
    &__sub-menu {
      display: none;
      &--open {
        display: block;
      }
    }

    &__plain {
      .menu-item__title {
        a[href] {
          border-radius: var(--radius-circle);
          border: none;
          box-shadow: none;
          box-sizing: border-box;
          color: var(--gray-color);
          display: flex;
          font-size: var(--font-size-xs);
          justify-content: flex-start;
          line-height: 1.7;
          margin: 0;
          min-height: unset;
          padding: var(--spacing-2xs) var(--spacing);
          text-align: left;
          text-decoration: none;
          width: 100%;
          position: relative;

          &:hover {
            background: var(--hover-gray-color);
            color: var(--primary-color);
            box-shadow: none;
          }
          &:active {
            transform: none;
          }
        }
        &-blank {
          font-size: var(--font-size-xs);
        }
      }
    }
  }
}