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

$card-padding-large: 16px;
$card-padding-medium: 12px;
$card-padding-small: 8px;
$card-padding-large-min: -1 * $card-padding-large;
$card-padding-medium-min: -1 * $card-padding-medium;
$card-padding-small-min: -1 * $card-padding-small;

.tix-card.v4 {
  @include elevation-1;
  background-color: $color-N0;

  &.mobile {
    border-radius: 8px;
  }

  &.desktop {
    border-radius: 12px;
  }

  &:active {
    @include elevation-2;
  }

  &.padding-large {
    padding: $card-padding-large;

    .separator::after,
    .separator::before {
      margin-left: $card-padding-large-min;
      margin-right: $card-padding-large-min;
    }

    .separator::after,
    .separator::before {
      margin-top: $card-padding-large;
      margin-bottom: $card-padding-large;
    }

    .tix-card-body.collapse,
    .tix-card-body.collapsing {
      padding-top: $card-padding-large;
    }
  }

  &.padding-medium {
    padding: $card-padding-medium;

    .separator::after,
    .separator::before {
      margin-left: $card-padding-medium-min;
      margin-right: $card-padding-medium-min;
    }

    .separator::after,
    .separator::before {
      margin-top: $card-padding-medium;
      margin-bottom: $card-padding-medium;
    }

    .tix-card-body.collapse,
    .tix-card-body.collapsing {
      padding-top: $card-padding-medium;
    }
  }

  &.padding-small {
    padding: $card-padding-small;

    .separator::after,
    .separator::before {
      margin-left: $card-padding-small-min;
      margin-right: $card-padding-small-min;
    }

    .separator::after,
    .separator::before {
      margin-top: $card-padding-small;
      margin-bottom: $card-padding-small;
    }

    .tix-card-body.collapse,
    .tix-card-body.collapsing {
      padding-top: $card-padding-small;
    }
  }
}