@mixin align-chip($border-radius, $font-size, $margin, $line-height) {
  border-radius: $border-radius;
  font-size: $font-size;
  margin: $margin;
  align-items: center;
  justify-content: center;
  line-height: $line-height;
}

@mixin icon-style($height, $width) {
  background-size: cover;
  display: flex;
  overflow: hidden;
  height: $height;
  width: $width;
}

@include export-module('chip-layout') {
  .sf-chip-list {
    display: flex;
    padding: $chip-list-padding;

    &.sf-chip,
    .sf-chip {
      -webkit-tap-highlight-color: transparent;
      border: $chip-border-size solid;
      @include align-chip($chip-border-radius, $chip-font-size, $chip-margin, $chip-line-height);
      box-shadow: $chip-box-shadow;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-flex;
      font-weight: $chip-font-weight;
      height: $chip-height;
      outline: none;
      overflow: hidden;
      padding: $chip-padding;
      position: relative;
      transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
      user-select: none;

      .sf-chip-avatar {
        @include icon-style($chip-avatar-size, $chip-avatar-size);
        @include align-chip($chip-avatar-border-radius, $chip-avatar-content-font-size, $chip-avatar-margin, $chip-icon-line-height);
      }

      .sf-chip-avatar-wrap,
      &.sf-chip-avatar-wrap {
        border-radius: $chip-avatar-wrapper-border-radius;
      }

      .sf-chip-icon {
        @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
        @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height);
      }

      .sf-chip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sf-chip-delete {
        @include icon-style($chip-delete-icon-size, $chip-delete-icon-width);
        @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height);
      }

      .sf-image-url {
        @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
        @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height);
        
        .sf-leading-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
      }

      .sf-trailing-icon-url {
        @include icon-style($chip-delete-icon-size, $chip-delete-icon-size);
        @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height);
        
        .sf-trailing-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .sf-chip-template {
        display: inline-flex;
      }
    }

    &:not(.sf-chip) {
      flex-wrap: wrap;
    }

    &.sf-multi-selection .sf-chip {
      & .sf-selectable-icon {
        align-items: center;
        justify-content: center;
        line-height: 1;
        display: flex;
        height: $chip-leading-icon-size;
        width: $chip-leading-icon-size;
        overflow: hidden;
        transition: width 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
      }

      &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) {
        & .sf-selectable-icon {
          width: 0;
        }
      }

      &.sf-chip-icon-wrap,
      &.sf-chip-avatar-wrap {
        & .sf-selectable-icon {
          display: none;
        }
      }

      &.sf-chip-avatar-wrap {
        & .sf-selectable-icon {
          height: $chip-avatar-size;
          width: $chip-avatar-size;
          margin: $chip-avatar-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
        }
      }

      &.sf-active {
        & .sf-chip-icon,
        & .sf-chip-avatar {
          display: none;
        }

        & .sf-selectable-icon {
          margin: $chip-multi-selection-icon-margin;
        }

        &.sf-chip-icon-wrap,
        &.sf-chip-avatar-wrap {
          & .sf-selectable-icon {
            display: flex;
          }
        }

        &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) {
          & .sf-selectable-icon {
            width: $chip-leading-icon-size;
          }
        }
      }
    }

    &.sf-rtl {
      &.sf-chip,
      & .sf-chip {
        .sf-chip-avatar {
          margin: $chip-rtl-avatar-margin;
        }

        .sf-chip-icon {
          margin: $chip-rtl-leading-icon-margin;
        }

        .sf-chip-delete {
          margin: $chip-rtl-delete-icon-margin;
        }

        .sf-trailing-icon-url {
          margin: $chip-rtl-delete-icon-margin;
        }
      }

      &.sf-multi-selection .sf-chip {
        & .sf-selectable-icon {
          margin: $chip-rtl-leading-icon-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
        }

        &.sf-chip-avatar-wrap {
          & .sf-selectable-icon {
            margin: $chip-rtl-avatar-margin;
            margin-top: $chip-multi-selection-icon-margin-top;
          }
        }
      }
    }
  }
}