@import './../theme/vars.scss';

@mixin vertical-menu-size($height, $padding, $font-size, $border-radius) {
  .ui-menu-item {
    height: $height;
    padding: 0 $padding;
    font-size: $font-size;
    line-height: $height;

    &:first-child {
      border-top-right-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }

    &:last-child {
      border-bottom-right-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }
  }
}

@mixin menu-size($height, $padding, $font-size) {
  .ui-menu-item {
    display: inline-block;
    height: $height;
    padding: 0 $padding;
    margin: 0 6px;
    font-size: $font-size;
  }
}

.ui-menu {
  padding: 0;
  margin: 0;
  overflow: auto;
  list-style: none;
  outline: none;

  .ui-menu-item {
    display: block;
    overflow: hidden;
    font-weight: normal;
    color: $menu-item-color;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s ease;
    user-select: none;

    &:hover,
    .active {
      background: #eaf8fe;
    }

    &.selected {
      background: #d5f1fd;
    }

    &.disabled {
      color: #ccc;
      cursor: not-allowed;
    }
  }

  &.vertical {
    @include vertical-menu-size($base-height, $base-padding, $base-fontSize, $base-radius);

    &.size-xl {
      @include vertical-menu-size($base-height-xl, $base-padding-xl, $base-fontSize-xl, $base-radius-xl);
    }

    &.size-lg {
      @include vertical-menu-size($base-height-lg, $base-padding-lg, $base-fontSize-lg, $base-radius-lg);
    }

    &.size-sm {
      @include vertical-menu-size($base-height-sm, $base-padding-sm, $base-fontSize-sm, $base-radius-sm);
    }

    &.size-xs {
      @include vertical-menu-size($base-height-xs, $base-padding-xs, $base-fontSize-xs, $base-radius-xs);
    }
  }

  &.horizontal {
    @include menu-size($base-height, $base-padding, $base-fontSize);

    display: flex;
    justify-content: flex-start;
    align-items: center;

    &.size-xl {
      @include menu-size($base-height-xl, $base-padding-xl, $base-fontSize-xl);
    }

    &.size-lg {
      @include menu-size($base-height-lg, $base-padding-lg, $base-fontSize-lg);
    }

    &.size-sm {
      @include menu-size($base-height-sm, $base-padding-sm, $base-fontSize-sm);
    }

    &.size-xs {
      @include menu-size($base-height-xs, $base-padding-xs, $base-fontSize-xs);
    }
  }
}