/**
 * -- NOTE: Shared Classes. --
 *
 * Due to the way css-modules handles @imports, refrain from using using
 * CSS selectors in shared.scss. Limit shared files to output-less sass
 * (i.e %placeholders, @mixin, @functions).
 *
 * Shared placeholders are used as a factory to output a predetermined ruleset.
 * Key Takeaway: With css-modules `@extend %class` rules will be duplicated.
 *
 */

$border-width: 1px;
$border: $border-width solid color('neutral-4');
$col-padding: ru(.25) ru(.75);

%card {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: $border;
  width: 100%;
  position: relative;
  background-color: color('neutral-8');
}

%icon {
  $icon-size: ru(1.5);
  $icon-offset: -$icon-size / 2 - rem-calc($border-width);

  z-index: 1;
  position: absolute;
  top: $icon-offset;
  right: $icon-offset;
  width: $icon-size;
  height: $icon-size;
  cursor: pointer;
}

%footer {
  display: flex;
  width: 100%;
  background-color: color('neutral-5');
  border-top: $border;
}

%label {
  @include typography-label;
  color: color('neutral-3');
}

%link {
  @include typography-7(false);

  color: color('neutral-4');

  &:hover,
  &:active {
    text-decoration: underline;
  }
}