@import '../../styles/mixins/common';

@function get-item-padding($height, $line-height) {
  @return (($height - $line-height) * 0.5) .5rem;
}

$menu-item-height: 1.75rem;
$menu-item-line-height: 1.25rem;
$menu-item-color: var(--ec-color-secondary-dark);
$menu-item-font-size: var(--ec-menu-font-size, var(--ec-font-size-action));
$menu-item-padding: get-item-padding($menu-item-height, $menu-item-line-height);

@mixin menu-item {
  cursor: inherit;
  line-height: $menu-item-line-height;
  min-height: $menu-item-height;
  padding: $menu-item-padding;
  border-radius: var(--ec-border-radius);
  display: flex;

  .label {
    margin-right: auto;

    & + .ec-icon {
      margin-left: .5rem;
    }
  }

  .ec-icon {
    margin-top: calc(calc(#{$menu-item-line-height} - #{map-get($icon-sizes, default)}) / 2);
    flex: none;

    & + .label {
      margin-left: .5rem;
    }
  }
  
  .ec-icon-sm {
    margin-top: calc(calc(#{$menu-item-line-height} - #{map-get($icon-sizes, sm)}) / 2);
  }
}

@mixin menu-ul {
  @include ul-reset;
  flex: auto;
  height: 100%;
  overflow-y: auto;

  li {
    cursor: pointer;
    padding: 0 .25rem;

    a {
      color: inherit;
      border-bottom: 0;
      text-decoration: none;
    }

    &.is-selected,
    &.is-highlighted {
      .item-wrapper {
        background-color: var(--ec-background-color-selected);
      }
    }

    &:hover .item-wrapper {
      background-color: var(--ec-background-color-hover);
    }

    &:focus .item-wrapper{
      outline: none;
      background-color: var(--ec-color-disabled-dark);
      position: relative;
      z-index: 1;
    }

    &.is-disabled .item-wrapper {
      color: var(--ec-color-disabled-dark);
      opacity: var(--ec-form-control-opacity-disabled);
    }

    &.is-disabled,
    &.is-readonly {
      cursor: default;

      .item-wrapper {
        background-color: transparent;
        color: inherit;
      }
    }

    &.is-checked {
      .icon-check {
        opacity: 1;
      }
    }

    &.heading {
      cursor: default;

      .item-wrapper {
        background-color: transparent;
      }

      &:not(:first-child) {
        margin-top: .5rem;
      }
    }

    &.divider:not(:last-child) {
      border-bottom: 1px solid var(--ec-border-color);
      padding-bottom: .25rem;
      margin-bottom: .25rem;
    }

    // The :not(.divider + .divider-top) prevents a double border from appearing when the previous item has a bottom divider
    &.divider-top:not(:first-child):not(.divider + .divider-top) {
      border-top: 1px solid var(--ec-border-color);
      padding-top: .25rem;
      margin-top: .25rem;
    }

    @each $index in (1, 2, 3) {
      $padding: $index + .5; 
      &.indent-#{$index} .item-wrapper {
        padding-left: #{$padding}rem;
      }
    }
  }
}

@mixin menu-parent {
  display: flex;
  flex-direction: column;
  flex: auto;
  position: relative;
  max-width: 100%;

  > header {
    cursor: pointer;

    &.is-selected,
    &.is-highlighted {
      .item-wrapper {
        background-color: var(--ec-background-color-selected);
      }
    }

    &:hover .item-wrapper {
      background-color: var(--ec-background-color-hover);
    }
  }
}