@import "../../../themes/core/colors";
@import "../../../themes/core/typography";
@import "list-base";
@import "list-expansion.scss";

.qms-list {
  display: block;
  padding-top: $qms-list-top;
  -webkit-tap-highlight-color: transparent;
  font-family: Open Sans;
}

.qms-list-item {
  display: block;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: 0;
  min-height: $item-height;

  &.mat-2-line {
    height: $two-line-height;

    &.image-item {
      height: 56px;
    }
  }

  &.mat-3-line {
    height: $three-line-height;
  }

  &.mat-multi-line {
    height: 102px;
  }

  &.image-item {
    .qms-list-item-content {
      border-bottom: none;
    }

    .qms-list-text {
      height: 100%;
      border-bottom: 1px solid $border-bottom-item;
      // padding-top: 10px;
    }

    .trailing-box {
      height: 100%;
      border-bottom: 1px solid #e0e0e0;
      padding-top: 10px;
    }
  }

  &.qms-list-item-disabled {
    .qms-line,
    .caption,
    .subtitle,
    button,
    span,
    p {
      color: black(0.38);
      pointer-events: none;
      cursor: default;
    }
  }
}

.qms-list-item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  height: inherit;
  border-bottom: 1px solid $border-bottom-item;
  margin: 0 1rem;
}

mat-icon.leading-icon,
.material-icons-outlined.leading-icon {
  flex-shrink: 0;
  width: $leading-icon;
  height: $leading-icon;
  font-size: $leading-icon;
  box-sizing: content-box;
  border-radius: 50%;
  color: black(0.6);
  padding: 4px 1rem 4px 4px;
}

img.leading-icon {
  width: 100%;
}

.qms-list-text {
  padding-right: 0;
  display: flex;
  flex-direction: column;
  flex: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.qms-line {
  line-height: 22px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: $size-sm;
  box-sizing: border-box;
  color: black(0.6);

  &.size-lg {
    @include size($size-md);
  }
}

.qms-list-header {
  .subtitle {
    line-height: 22px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: $subtitle-color;
    font-weight: $subtitle-weight;
    font-size: $size-md;
    font-family: "Raleway";

    &.size-sm {
      @include size($size-sm);
    }
  }

  .caption {
    line-height: 16px;
    font-size: $size-caption;
    color: black(0.6);
    display: flex;
    justify-content: space-between;

    .mat-icon,
    .material-icons-outlined {
      font-size: 20px;
    }

    .overline {
      font-family: "Raleway";
      font-weight: 600;
    }
  }
}

.trailing-box {
  display: flex;

  > * {
    padding-left: 1.5rem;
  }

  .caption {
    color: black(0.6);
    font-size: $size-caption;

    mat-icon,
    .material-icons-outlined {
      font-size: 20px;
    }
  }

  button {
    color: black(0.6);
    padding: 0;
    margin-left: 1rem;
  }
}

.default-subtitle {
  color: $subtitle-color;
}

.wrap-icon {
  // align-self: flex-start;
  // margin-top: $margin-icon;
}

.wrap-image {
  box-sizing: content-box;
  color: black(0.6);
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: black(0.12);
  margin-right: 1rem;
  align-self: flex-start;
  margin-top: 0;

  &.image-circle {
    @include image-shape($image-circle-size, $image-circle-size, 50%);

    img {
      @include image-shape($image-circle-size, $image-circle-size, 50%);
    }
  }

  &.image-rect {
    @include image-shape(
      $image-rect-unset,
      $image-square-size,
      $border-radius-default
    );

    img {
      @include image-shape(
        $image-rect-unset,
        $image-square-size,
        $border-radius-default
      );
    }
  }

  &.image-square {
    @include image-shape(
      $image-square-size,
      $image-square-size,
      $border-radius-default
    );

    img {
      @include image-shape(
        $image-square-size,
        $image-square-size,
        $border-radius-default
      );
    }
  }

  .mat-icon {
    display: flex;
    -ms-grid-row-align: center;
    align-self: center;
    padding: 0;
    height: auto;
  }
}
