$card-padding: 1em;
$card-radius: 4px;
$card-icon-size: 6.4em;
$pending: #e0ad4f;
$reject: #f26c46;
$live: #00ab8e;
$pill-grey: #edefef;

.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  @include gmq(portable) {
    justify-content: stretch;
  }
}

.card {
  @include pop();

  background: $white;
  border-radius: $card-radius;
  border: 1px solid palette(gray, x-light);
  box-shadow: 0 2px 2px rgba(palette(gray), 0);
  flex-direction: column;
  min-width: 320px;
  margin-bottom: 1em;
  position: relative;

  @include gmq(palm) {
    margin: 0 auto 1em;
    width: 100%;
  }

  @include gmq(portable) {
    max-width: 100%;
  }

  @include gmq(desk) {
    margin-right: 1.33%;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 2px rgba(palette(gray), 0.2);
  }

  &--selected {
    border: 3px solid rgba($blue, 0.8);
  }

  &__header,
  &__body,
  &__footer {
    padding: $card-padding;
    flex-direction: column;
  }

  &__body {
    flex: 1 1 0%;
  }

  &__footer {
    flex-direction: row;
    justify-content: flex-start;
  }

  .select-box {
    margin: 1em;
    margin-left: auto;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  &__icon {
    width: $card-icon-size;
    height: $card-icon-size;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 15px;
  }

  &__overlay {
    @include s-overlay(palette(blue), 0.8);

    display: flex;
    flex-direction: column;
    padding: 1em;

    &__links {
      flex: 1 1 0%;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        height: 60px;
        width: 60px;
        padding: 0.55em;
      }
    }
  }

  &__platforms {
    &--icon {
      opacity: 0.3;
    }
  }
}

.pill {
  background: $pill-grey;
  border-radius: 16px !important;
  color: black;
  cursor: pointer;
  padding: 5px 15px;
  margin: 0 0.2em;

  &__pending {
    background: $pending;
    color: white;
    cursor: default;
    text-transform: capitalize;
  }

  &__live {
    background: $live;
    color: white;
    cursor: default;
    text-transform: capitalize;
  }

  &__rejected {
    background: $reject;
    color: white;
    cursor: default;
    text-transform: capitalize;
  }
}

//Browser Hacks
[data-useragent*='Trident'] {
  .card {
    height: 400px;
  }
}