// ********************************************
// container definition
$pill: #{$prefix}-pill;
$pill-group: #{$prefix}-pill-group;
$pill-icon: #{$prefix}-icon;
$input-pill: #{$prefix}-input-pill;

// ********************************************
// local
$border-type: solid 1px;
$radius: space(s);

@mixin withFocus($position) {
  outline: none;
  position: relative;

  &:after {
    content: "";
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    @include dsFocus();

    border-radius: 0;

    @if $position == first {
      border-bottom-left-radius: $radius;
      border-top-left-radius: $radius;
    }

    @if $position == last {
      border-bottom-right-radius: $radius;
      border-top-right-radius: $radius;
    }

    @if $position == only {
      border-radius: $radius;
    }
  }
}
@mixin withFirstChildFocus() {
  @include withFocus(first)
}

@mixin withLastChildFocus() {
  @include withFocus(last)
}

@mixin interactivePillWithActiveState() {
  .#{$pill}__label {
    color: color(brand-primary, 800)
  }

  .#{$pill-icon} {
    svg path {
      fill: color(brand-primary, 800)
    }
  }
}

.#{$pill} {
  outline: none;
  display: inline-flex;
  align-items: center;
  background-color: color(brand-primary, 200);
  padding: 0 space(xxs);
  border-radius: $radius;
  white-space: nowrap;
  margin-bottom: space(xs);

  &__label {
    padding-top: space(xs) * 0.25;
    margin: 0 space(xs);
    color: color(neutral, 800);
    @include body-text-style();
  }

  // label variant
  &--title {
    .#{$pill}__label {
      font-size: font-size(400);
      font-weight: 600;
    }
  }

  &--m {
    height: space(m);
  }

  &--l {
    height: space(l);
  }
}

.#{$pill}.removable-pill, .#{$pill}.dropdown-pill, .#{$pill}.input-pill {
  &:active, &:focus-within {
    @include withFocus(only)
  }
}

.#{$pill}.dropdown-pill {
  cursor: pointer;

  &:hover, &:active, &:focus-within, &[aria-expanded="true"] {
    @include interactivePillWithActiveState()
  }

  .dropdown-pill-menu {
    margin-top: space(xxs);
  }

  // TODO: this modifies the size of an item, maybe we should have a smaller one by default. ask UX
  .dropdown-pill-chevron-down {
    justify-content: center;
    margin-right: space(xxs);
    svg {
      width: space(xs) * 1.5
    }
  }
}

.#{$pill}.input-pill {
  cursor: pointer;
  background: color(neutral, 000);
  border: $border-type color(neutral, 200);
  width: 9em;

  .#{$pill}__label {
    margin: 0 space(xxs) 0 space(xs);
  }

  &.#{$input-pill}--value {
    background-color: color(brand-primary, 200);
    border: unset;

    .em-ds-input {
      background-color: color(brand-primary, 200);
    }  

    &:active, &:focus-within, &[aria-expanded="true"] {
      background-color: color(neutral, 000);

      .em-ds-input {
        background-color: color(neutral, 000);
      }
    }
  }
  
  .em-ds-input {
    color: color(brand-primary, 800);
    padding: unset;
    border: unset;
    height: inherit;

    &:focus {
      box-shadow: unset;
    }    
  }
}

.dropdown-pill-menu {
  margin-top: space(xxs);
}

.#{$pill}.removable-pill {
  .remove-pill-button {
    cursor: pointer;
  }
}

// interactive pills
.#{$pill-group} .#{$pill}.dropdown-pill, .#{$pill-group} .#{$pill}.removable-pill, .#{$pill}.input-pill {
  &:active, &:focus-within {
    @include withFocus(null);
  }

  &:first-child:not(:only-child) {
    &:active, &:focus-within {
      @include withFirstChildFocus();
    }
  }

  &:last-child:not(:only-child) {
    &:active, &:focus-within {
      @include withLastChildFocus();
    }
  }

  &:only-child {
    &:active, &:focus-within {
      @include withFocus(only)
    }
  }
}

.#{$pill-group} {
  display: flex;
  &:not(:last-child) {
    margin-right: space(xs);
  }

  .#{$pill} {
    padding: 0;
    border-radius: 0;

    &__addon {
      // adds some margin to the addon on the middle pills segments
      &:last-child {
        margin-right: space(xxs) * 0.5;
      }
    }

    &:first-child {
      border-bottom-left-radius: $radius;
      border-top-left-radius: $radius;
      padding-left: space(xxs);
      // removes addon margin to first pill
      &__addon {
        &:last-child {
          margin-right: 0;
        }
      }
    }

    &:last-child {
      border-bottom-right-radius: $radius;
      border-top-right-radius: $radius;
      padding-right: space(xxs);
      // removes addon margin to first pill
      &__addon {
        &:last-child {
          margin-right: 0;
        }
      }
    }

    &:not(:last-child) {
      margin-right: space(xxs) * 0.5;
    }
  }
}

// ********************************************
// Mobile
@include md {
.#{$pill} {
  &--m {
    height: toMobile(space(m));
  }

  &--l {
    height: toMobile(space(l));
  }

  & {
    min-width: calc(#{toMobile(space(l))} * 1.75);
    justify-content: center;
  }

  &__label {
    font-size: toMobile(font-size(500));
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &.removable-pill {
    justify-content: space-between;
  }

  &.dropdown-pill {
    justify-content: space-between;
  }
}
}