@use "../settings" as *;

/**
 * Card (<article>)
 */

article {
  margin: var(#{$✨}block-spacing-vertical) 0;
  padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
  border-radius: var(#{$✨}border-radius);
  background: var(#{$✨}card-background-color);
  box-shadow: var(#{$✨}card-box-shadow);

  > header,
  > footer {
    margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
    margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
    padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
    background-color: var(#{$✨}card-sectionning-background-color);
  }

  > header {
    margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
    margin-bottom: var(#{$✨}block-spacing-vertical);
    border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
    border-top-right-radius: var(#{$✨}border-radius);
    border-top-left-radius: var(#{$✨}border-radius);
  }

  > footer {
    margin-top: var(#{$✨}block-spacing-vertical);
    margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
    border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
    border-bottom-right-radius: var(#{$✨}border-radius);
    border-bottom-left-radius: var(#{$✨}border-radius);
  }
}