// @author    : Adarsh Pastakia
// @version   : 5.0.0
// @copyright : 2018
// @license   : MIT

.ui-menu {
  display: block;
  min-width: 4em;

  $base: unquote(".ui-menu");

  &__group {
    border: 0;
    flex: 0 0 auto;
    margin: 0 0 4px;
    padding: 0 0 4px;
    position: relative;

    &__container {
      > #{$base}__item {
        border: 0;
      }
    }

    &__label {
      font-size: 0.85em;
      margin: 0 0.5em;
      padding: 4px 0;
    }

    &--collapsible &__label {
      width: calc(100% - 1em);
    }
    &--collapsible &__label::after {
      content: "\25BE";
      float: right;

      @at-root [dir="rtl"] & {
        float: left;
      }
    }

    &--collapsible[data-collapsed="true"] &__container {
      margin-top: 0.5em;
      max-height: 0;
      overflow: hidden;
    }
    &--collapsible[data-collapsed="true"] &__label::after {
      content: "\25B8";
    }

    &::after {
      content: "";
      @include position(absolute, null 0 0);
    }

    &:last-child::after {
      display: none;
    }
  }

  &__item {
    border-width: 1px 0;
    display: grid;
    flex: 0 0 auto;
    grid-template-areas: "link caret";
    grid-template-columns: 1fr auto;
    max-width: 18em;
    min-width: 4em;
    overflow: hidden;

    &__link {
      align-items: center;
      display: grid;
      grid-area: link;
      grid-template-areas: "icon label badge caret";
      grid-template-columns: auto 1fr auto auto;
      padding: 0 0.5em;

      &:hover {
        .ui-icon {
          color: inherit;
        }
      }

      &[data-open="true"],
      &:active {
        transition: background-color 0.5s;
      }

      &[data-disabled="true"] {
        pointer-events: none;
      }
    }

    .ui-badge {
      grid-area: badge;
      line-height: 1.2em;
    }

    &__label {
      font-size: 0.95em;
      grid-area: label;
      padding: 0.5em 0.25em;
      @include ellipsis();
    }

    &__icon {
      font-size: 1.25em;
      grid-area: icon;
    }

    &__caret {
      grid-area: caret;

      &--split {
        padding: 0.35em 0.5em;

        .ui-icon {
          vertical-align: middle;
        }

        &[data-open="true"],
        &:active {
          transition: background-color 0.5s;
        }
      }

      @at-root [dir="rtl"] & {
        transform: scaleX(-1);
      }
    }
  }

  &__overflow {
    align-self: flex-end;
  }

  .ui-divider {
    display: block;
    margin: 4px 0;
  }

  &__bar {
    align-content: space-between;
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;

    &::after {
      content: "";
      @include position(absolute, null 0 0);
    }

    &__wrapper {
      align-items: flex-end;
      flex-flow: row nowrap;
      overflow: hidden;
      @extend %ui-flex;

      .ui-divider {
        align-self: stretch;
        @extend %vr;
      }

      #{$base}__item {
        &__label {
          padding: 0.25em;
        }
        &__caret--split {
          padding: 0.25em 0.5em;
        }
      }

      #{$base}__group {
        align-items: stretch;
        margin: 0;
        padding: 0;

        &::after {
          display: none;
        }

        &__label {
          line-height: 1;
          pointer-events: none;

          .ui-icon {
            display: none;
          }
        }

        &__container {
          @extend %ui-flex;
          flex-flow: row nowrap;

          > .ui-divider {
            font-size: 0.8em;
            margin: -0.5em 0 0;
          }
        }
      }
    }
  }
}
