@import '../../style/themes/index';
@import '../../style/mixins/index';
@menu-list-prefix-cls: ~'@{ant-prefix}-menu-list';

.@{menu-list-prefix-cls} {
  .reset-component();
  display: flex;
  min-height: @min-height-menu-list;
  padding: 0 @padding-sm;
  background-color: @color-base-white;
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid @color-gray-100;
    &-title {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;
      min-height: 0;
    }

    .@{menu-list-prefix-cls}-prefix-icon {
      display: inline-block;
      margin-right: 12px;
      color: @color-gray-500;
      font-weight: @typography-font-bold;
      font-size: @title-1-size;
      font-style: normal;
      line-height: 1;
      text-align: center;
      text-transform: none;
      text-decoration: none;
      background: transparent;
      border: 0;
      outline: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;
      text-rendering: auto;

      &:focus,
      &:hover {
        color: @icon-color-hover;
        text-decoration: none;
      }
    }
    .@{menu-list-prefix-cls}-suffix-icon {
      display: inline-block;
      color: @color-gray-500;
      font-weight: @typography-font-bold;
      font-size: @title-1-size;
      font-style: normal;
      line-height: 1;
      text-align: center;
      text-transform: none;
      text-decoration: none;
      background: transparent;
      border: 0;
      outline: 0;
      cursor: pointer;
      transition: color @animation-duration-slow;
      text-rendering: auto;

      &:focus,
      &:hover {
        color: @icon-color-hover;
        text-decoration: none;
      }
    }
  }

  &-close {
    display: inline-block;
    //msb overwrite start
    margin-left: 12px;
    color: @color-gray-500;
    //msb overwrite end
    font-weight: @typography-font-bold;
    font-size: @title-1-size;
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color @animation-duration-slow;
    text-rendering: auto;

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-title {
    flex: 1;
    margin: 0;
    //msb overwrite start
    color: @color-gray-800;
    font-weight: @typography-font-medium;
    font-size: @subtitle-3-size;
    line-height: @subtitle-line-height * 1px;
    //msb overwrite end
  }
}

@import './rtl';