@import '../styles/theme.scss';

@mixin lineClamp($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

.rm-card {
  background: $paletteCommonWhite;
  flex: 1;
  &.raised {
    box-shadow: $shadows1;
  }

  &-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px #{$spacingUnit * 2}px;

    &-title {
      margin-right: #{$spacingUnit * 2}px;
      padding: #{$spacingUnit * 2}px 0px;
    }
    &-countdown {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  &-body {
    padding: 0px #{$spacingUnit * 2}px;
    .rm-card-title {
      padding-bottom: #{$spacingUnit * 2}px;
      &-text {
        @include lineClamp(2);
        line-height: 1.8;
        // letter-spacing: #{$spacingUnit / 1.6}px;
        // word-spacing: #{$spacingUnit / 0.8}px;
      }
    }
    .rm-card-container {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .rm-card-summary {
        flex: 1;
        // max-height: #{$spacingUnit * 16}px;
        overflow: hidden;
        .rm-card-content {
          &-text {
            @include lineClamp(3);
            line-height: 1.6;
            // letter-spacing: #{$spacingUnit / 2.4}px;
            // word-spacing: #{$spacingUnit / 1.2}px;
          }
        }
      }
    }
    &.alignLeft {
      .rm-card-container {
        .rm-card-summary {
          margin-left: #{$spacingUnit * 2}px;
        }
      }
    }
    &.alignRight {
      .rm-card-container {
        .rm-card-summary {
          margin-right: #{$spacingUnit * 2}px;
        }
      }
    }
    &.noMedias {
      .rm-card-container {
        .rm-card-summary {
          max-height: unset;
          overflow: unset;
        }
      }
    }
    &.multiMedias {
      .rm-card-medias {
        padding-bottom: #{$spacingUnit * 2}px;
      }
    }
    .rm-card-medias {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rm-card-media {
        width: 100vh;
        max-height: #{$spacingUnit * 16}px;
        &:not(:first-child):not(:last-child) {
          margin: 0px #{$spacingUnit/2}px;
        }
        &:first-child {
          margin-right: #{$spacingUnit/2}px;
        }
        &:last-child {
          margin-left: #{$spacingUnit/2}px;
        }
      }
    }
  }

  &-footer {
    padding: #{$spacingUnit * 2}px 0px;
  }

  &.horizontal {
    .rm-card-header {
      padding: #{$spacingUnit * 2}px;
      &-title {
        padding: 0px;
      }
    }
    .rm-card-body {
      &.multiMedias {
        .rm-card-medias {
          padding-top: #{$spacingUnit * 2}px;
        }
      }
      .rm-card-container {
        .rm-card-summary {
          .rm-card-content {
            &-text {
              &.lessContent {
                @include lineClamp(1);
              }
            }
          }
        }
      }
    }
  }
  &.vertical {
    .rm-card-body {
      padding: 0px;
      .rm-card-title {
        padding: 0px #{$spacingUnit * 2}px;
      }
      .rm-card-container {
        /* disable flex layout */
        display: block;
        .rm-card-summary {
          max-height: unset;
          overflow: unset;
          padding: 0px #{$spacingUnit * 2}px;
          .rm-card-title {
            padding: 0px 0px #{$spacingUnit * 2}px 0px;
          }
        }
        .rm-card-medias {
          padding-bottom: #{$spacingUnit * 2}px;
          .rm-card-media {
            &:only-child {
              margin: 0px;
            }
          }
        }
      }
    }
  }
}