@import '../colors';
@import '../variables';
@import '../mixins';

.tix-list {
  @include font-base;
  background-color: $color-N0;
  padding: 12px 20px;

  &.clickable {
    cursor: pointer;
    user-select: none;
  }

  &.with-divider {
    padding-bottom: 0;
  }

  .tix-divider {
    margin-top: 12px;
  }

  &-content {
    display: flex;
  }

  &-left-side {
    flex: none;
    margin-right: 12px;

    .list-img {
      border-radius: 4px;

      &.small {
        max-width: 32px;
      }

      &.medium {
        max-width: 64px;
      }
    }
  }

  &-right-side {
    flex: none;
    margin-left: 14px;
  }

  &-main-content {
    flex: 1;

    &.inline-main-content {
      display: grid;
      grid-template-columns: minmax(36px, max-content) 1fr;
      grid-gap: 12px;
    }

    .title {
      @include font-size-b1;
      color: $color-N800;

      &.regular {
        font-weight: $font-weight-regular;
      }

      &.bold {
        font-weight: $font-weight-bold;
      }

      span {
        color: $font-color-activity;
      }
    }

    .description {
      @include font-size-b2;
      font-weight: $font-weight-regular;
      margin-top: 2px;

      &.lowEmphasis {
        color: $font-color-low-emphasis;
      }

      &.highEmphasis {
        color: $font-color-high-emphasis;
      }

      span {
        color: $font-color-activity;
      }
    }
  }
}