/* ==================================
   #CARD
   ================================== */

/* Variables
   ========================================================================== */

$au-card-border-color: var(--au-gray-200) !default;
$au-card-standout-border-color: var(--au-gray-300) !default;
$au-card-standout-color: var(--au-gray-100) !default;
$au-card-radius: var(--au-radius) !default;

/* Component
  ========================================================================== */

.au-c-card {
  display: flex;
  flex-direction: column;
  background-color: var(--au-white);
  border: 0.1rem solid $au-card-border-color;
  border-radius: $au-card-radius;
}

.au-c-card--shadow {
  border: 0;
  box-shadow:
    0 1px 3px rgba($au-gray-900, 0.1),
    0 4px 20px rgba($au-gray-900, 0.035),
    0 1px 1px rgba($au-gray-900, 0.025);
}

.au-c-card--standout {
  background-color: $au-card-standout-color;
  border-color: $au-card-standout-color;
}

.au-c-card--fill {
  height: 100%;
}

.au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header,
.au-c-card--flex.au-c-card--expandable .au-c-card__header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  > *:nth-child(2) {
    flex-grow: 2;
  }

  .au-c-badge {
    margin-bottom: 0;
  }
}

.au-c-card--flex:not(.au-c-card--expandable) .au-c-card__header {
  align-items: center;
}

.au-c-card--flex.au-c-card--expandable .au-c-card__header {
  align-items: flex-start;
}

.au-c-card__header {
  .au-c-badge {
    margin-bottom: $au-unit-small;
  }
}

.au-c-card__header,
.au-c-card__content,
.au-c-card__footer {
  .au-c-card--padding & {
    padding: $au-unit;
  }

  .au-c-card--padding-small & {
    padding: $au-unit-small;
  }

  .au-c-card--padding:not(.au-c-card--divided) & + &,
  .au-c-card--padding-small:not(.au-c-card--divided) & + & {
    padding-top: 0;
  }
}

.au-c-card--shadow.au-c-card--expandable .au-c-card__header {
  padding-left: 0;
}

.au-c-card__footer {
  .au-c-card--standout & {
    background-color: var(--au-gray-100);
  }
}

.au-c-card__clickable {
  display: flex;
  justify-content: space-between;
  transition: background-color var(--au-transition);

  .au-c-card--shadow & {
    justify-content: flex-start;
  }

  &:hover {
    background-color: var(--au-gray-100);
  }

  .au-card__header {
    width: 100%;
  }
}

/* Modifiers
  ========================================================================== */

/* center text */

.au-c-card--text-center {
  text-align: center;

  .au-c-badge {
    margin-right: 0;
  }
}

/* Expandable */
.au-c-card--expandable {
  .au-c-card__toggle[aria-expanded] .au-c-card__toggle-false,
  .au-c-card__toggle[aria-expanded="true"] .au-c-card__toggle-true {
    display: none;
  }

  .au-c-card__toggle[aria-expanded="true"] .au-c-card__toggle-false {
    display: block;
  }
}

.au-c-card__toggle,
.au-c-card__clickable {
  cursor: pointer;
}

.au-c-card__toggle {
  flex: none;

  .au-c-card--padding & {
    margin-top: $au-unit;
    margin-right: $au-unit;
    margin-bottom: $au-unit;
  }

  .au-c-card--padding-small & {
    margin-top: $au-unit-small;
    margin-right: $au-unit-small;
    margin-bottom: $au-unit-small;
  }

  .au-c-card--shadow.au-c-card--padding &,
  .au-c-card--shadow.au-c-card--padding-small & {
    margin-right: 0;
  }
}

.au-c-card__content {
  flex-grow: 1;

  &:focus {
    outline: none !important;
  }
}

.au-c-card--divided .au-c-card__content,
.au-c-card--divided .au-c-card__footer {
  border-top: 0.1rem solid $au-card-border-color;
}

.au-c-card--divided.au-c-card--standout .au-c-card__content,
.au-c-card--divided.au-c-card--standou .au-c-card__footer {
  border-top-color: $au-card-standout-border-color;
}