@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";
@import "../../variables/fonts.scss";

@mixin make-card($background: #fff, $foreground: $gray500, $paddingHorizontal: 20px, $paddingVertical: 20px) {
  box-sizing: border-box;
  background-color: $background;
  border-radius: $borderRadiusBase;
  border: none;
  color: $foreground;
  border: 1px solid $gray200;
  position: relative;
}

@mixin make-card-header(
  $color: $gray700,
  $paddingHorizontal: 20px,
  $paddingVertical: 30px,
  $fontSize: $fontSize3,
  $fontWeight: $fontWeight3
) {
  font-family: $fontBase;
  color: $color;
  font-size: $fontSize;
  font-weight: $fontWeight;

  padding: $paddingVertical $paddingHorizontal;
  transform: translate(0px, 2px); // font baseline hack for sailec

  display: flex;
  flex-direction: row;
  align-items: center;
  height: $fontSize;
}

@mixin make-card-title {
  // Add ellipsis if title is too wide for its container
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin make-card-body(
  $fontSize: $fontSizeBase,
  $fontWeight: $fontWeightBase,
  $paddingVertical: 20px,
  $paddingHorizontal: 20px
) {
  font-family: $fontBase;
  font-size: $fontSize;

  padding-top: $paddingVertical;
  padding-left: $paddingHorizontal;
  padding-right: $paddingHorizontal;
  padding-bottom: 20px;
}

@mixin make-card-well(
  $fontSize: $fontSize3,
  $fontWeight: $fontWeight3,
  $color: $midnight,
  $background: $gray000
) {
  font-family: $fontBase;
  font-size: $fontSize;
  font-weight: $fontWeight;
  text-align: center;
  line-height: 28px;
  color: $color;

  background-color: $background;
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;

  &:first-child, .card-loading-wrapper:first-child + & {
    border-top-left-radius: $borderRadiusBase;
    border-top-right-radius: $borderRadiusBase;
  }
  &:last-child {
    border-bottom-left-radius: $borderRadiusBase;
    border-bottom-right-radius: $borderRadiusBase;
  }
}

@mixin make-card-well-highlight($color: $midnight, $fontWeight: $fontWeight3) {
  color: $color;
  white-space: nowrap; // don't wrap in the middle of a highlighted item
  font-weight: $fontWeight;
}


@keyframes card-loading-indeterminate-animation {
  0% {
    margin-left: 0;
    width: 0;
    animation-timing-function: ease-in;
  }
  50% {
    margin-left: 0;
    width: 100%;
  }
  100% {
    margin-left: 100%;
    width: 0;
    animation-timing-function: ease-out;
  }
}
@mixin make-card-loading-wrapper($height: 2px) {
  height: $height;
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  left: 0;
  right: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

@mixin make-card-loading($color: $midnight, $percent: 100%, $height: 2px, $indeterminate: false) {
  width: $percent;
  height: $height;
  background-color: $color;
  margin-bottom: -1 * $height;

  @if $indeterminate {
    // Since the state is indeterminate, the bar has a fixed width.
    width: 100%;
    animation-name: card-loading-indeterminate-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  } @else {
    // As the bar grows, get longer.
    transition: all 250ms linear;
  }
}

@mixin make-card-table(
  $background: #fff,
  $foreground: $midnight,
  $paddingVertical: 20px,
) {
  background-color: $background;
  color: $foreground;
  font-family: $fontBase;
  font-size: 14px;

  // When the user scrolls to the edge of the card table, show a shadow to indicate that they can
  // scroll either to the left, right, or in both directions.
  &-scroll-left { box-shadow: inset 30px 0 20px -30px $midnightOpaque20; }
  &-scroll-right { box-shadow: inset -30px 0 20px -30px $midnightOpaque20; }
  &-scroll-both {
    box-shadow: inset 30px 0 20px -30px $midnightOpaque20,
                inset -30px 0 20px -30px $midnightOpaque20;
  }


  table {
    border-collapse: collapse;
    width: 100%;
  }

  table > thead > tr > th {
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    line-height: 38px;
    border-top: 1px solid $gray100;
    border-bottom: 1px solid $gray100;
    text-align: left;
  }
  table > tbody > tr > td {
    padding-left: 20px;
    padding-right: 20px;

    padding-top: 5px;
    line-height: 38px;

    border-bottom: 1px solid $gray100;
    text-align: left;

    white-space: nowrap;
  }
  table > tbody > tr:last-of-type > td {
    border-bottom: 1px solid transparent;
  }
}
@mixin make-card-table-scroll {
  overflow-x: auto;
}

// A normal card.
:global(.card) {
  @include make-card;
  :global(.card-header) { @include make-card-header($fontSize: $fontSize3, $fontWeight: $fontWeight3); }
  :global(.card-title) { @include make-card-title; }
  :global(.card-body) { @include make-card-body; }
}

// A modal card.
:global(.card-modal) {
  @include make-card($paddingVertical: 40px, $paddingHorizontal: 20px);

  :global(.card-header) {
    @include make-card-header(
      $fontSize: $fontSize2,
      $fontWeight: $fontWeight2,
      $paddingVertical: 40px
    );
  }
  :global(.card-body) {
    @include make-card-body(
      $paddingVertical: 40px
    );
  }
}

:global(.card-well) { @include make-card-well; }
:global(.card-well-highlight) { @include make-card-well-highlight; }

:global(.card-well-dark) {
  @include make-card-well(
    $color: $gray400,
    $fontWeight: 400,
    $background: $midnight
  );
}
:global(.card-well-dark .card-well-highlight) {
  @include make-card-well-highlight($color: #fff, $fontWeight: bold);
}


:global(.card-loading-wrapper) { @include make-card-loading-wrapper; }
:global(.card-loading) { @include make-card-loading; }
:global(.card-loading-indeterminate) { @include make-card-loading($indeterminate: true); }
:global(.card-dark) {
  @include make-card($midnight, #fff);
}

:global(.card-table) { @include make-card-table(#fff, $midnight); }
:global(.card-table-scroll) { @include make-card-table-scroll; }