%card-base {
  background: color('neutral-8');
  border: 1px solid color('neutral-4');
  padding: ru(.75) ru(1);
}

%card-reset {
  background-color: transparent;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.playback-wrapper {
  @extend %card-base;

  padding: ru(1) ru(1.5);

  &-head {
    @include typography-2(false);

    padding-bottom: ru(1);
    align-items: center;
    border-bottom: 1px solid color('neutral-4');
  }

  &-foot {
    padding-top: ru(.75);

    a { color: color('brand-2'); }
  }

  .playback-card {
    @extend %card-reset;

    padding-left: 0;
    padding-right: 0;

    &:last-child {
      border-bottom: 1px solid color('neutral-4');
    }
  }
}

.playback-card {
  @extend %card-base;

  p {
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.edit-column {
  text-align: right;
}

.edit {
  @include typography-7(false);
}

.logo-wrapper {
  height: ru(2);
  font-weight: bold;

  svg {
    width: auto;
    height: ru(2);
  }
}

.amount {
  text-align: right;
}

@media #{$small-only} {
  .playback-card {
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid color('neutral-4');
  }

  .playback-wrapper {
    padding: ru(1);

     &-logo {
       text-align: center;
     }
  }

  .amount {
    text-align: center;
    margin-top: ru(.5);
  }
}