.vuiCard {
  display: flex;
  flex-direction: column;
  border-radius: $sizeXs;
  width: 100%;
  overflow: hidden;
}

.vuiCard--full {
  background-color: var(--vui-color-light-shade);
  transition: background-color $transitionSpeed, box-shadow $transitionSpeed;

  &.vuiCard--interactive {
    &:hover {
      box-shadow: $shadowSmallEnd;
    }
  }
}

.vuiCard--outlined {
  background-color: var(--vui-color-empty-shade);
  border: 1px solid var(--vui-color-border-light);

  .vuiCard__body--withHeader {
    border-top: 1px solid var(--vui-color-border-light);
  }

  transition: box-shadow $transitionSpeed;

  &.vuiCard--interactive {
    &:hover {
      box-shadow: $shadowSmallEnd;
    }
  }
}

.vuiCard--fullHeight {
  height: 100%;
}

.vuiCard--ungrouped {
  height: auto;
}

.vuiCard--center {
  align-items: center;
  text-align: center;

  .vuiCard__header,
  .vuiCard__body {
    align-items: center;
    text-align: center;
  }
}

.vuiCard--left {
  align-items: flex-start;
  text-align: left;

  .vuiCard__header,
  .vuiCard__body {
    align-items: flex-start;
    text-align: left;
  }
}

.vuiCard__header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: $sizeM $sizeL;
}

.vuiCard__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: $sizeM $sizeL;
  flex-grow: 1;
}

.vuiCard__body--scrollable {
  overflow-y: auto;
}

.vuiCard--xxs {
  .vuiCard__header,
  .vuiCard__expandableButton,
  .vuiCard__body {
    padding: $sizeXs $sizeS;
  }
}

.vuiCard--xs {
  .vuiCard__header,
  .vuiCard__expandableButton,
  .vuiCard__body {
    padding: $sizeS $sizeM;
  }
}

.vuiCard--s {
  .vuiCard__header,
  .vuiCard__expandableButton,
  .vuiCard__body {
    padding: $sizeM $sizeL;
  }
}

.vuiCard--m {
  .vuiCard__header,
  .vuiCard__expandableButton,
  .vuiCard__body {
    padding: $sizeL $sizeXl;
  }
}

.vuiCard--l {
  .vuiCard__header,
  .vuiCard__expandableButton,
  .vuiCard__body {
    padding: $sizeXl $sizeXxl;
  }
}

.vuiCard--expandable {
  .vuiCard__expandableButton {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color $transitionSpeed;
  }

  .vuiCard__expandableButton:hover {
    background-color: var(--vui-color-light-shade);
  }

  .vuiCard__expandableButton:focus {
    outline: 2px solid var(--vui-color-primary);
    outline-offset: -2px;
  }

  .vuiCard__expandableIcon {
    transition: transform $transitionSpeed ease-in-out;
  }

  .vuiCard__expandableHeader {
    text-align: inherit;
  }
}

// Size-specific expandable button padding
.vuiCard--expandable.vuiCard--s .vuiCard__expandableButton {
  padding: $sizeM $sizeL;
}

.vuiCard--expandable.vuiCard--m .vuiCard__expandableButton {
  padding: $sizeL $sizeXl;
}

.vuiCard--expandable.vuiCard--l .vuiCard__expandableButton {
  padding: $sizeXl $sizeXxl;
}

.vuiCard--expandable.vuiCard--outlined .vuiCard__body {
  border-top: 1px solid var(--vui-color-border-light);
}

.vuiSimpleCard {
  border-radius: $sizeXs;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background-color: var(--vui-color-empty-shade);
  border: 1px solid var(--vui-color-border-light);
}

.vuiSimpleCard--interactive {
  border: 1px solid var(--vui-color-primary-highlight-shade);
  transition: box-shadow $transitionSpeed, border-color $transitionSpeed;

  &:hover {
    border-color: var(--vui-color-primary-shade);
    box-shadow: $shadowLargeEnd;
  }
}

.vuiSimpleCard--danger {
  border-color: var(--vui-color-danger-shade);

  &.vuiSimpleCard--interactive:hover {
    border-color: var(--vui-color-danger-shade);
  }
}

.vuiSimpleCard--warning {
  border-color: var(--vui-color-warning-shade);

  &.vuiSimpleCard--interactive:hover {
    border-color: var(--vui-color-warning-shade);
  }
}

.vuiSimpleCard--fullHeight {
  height: 100%;
}

.vuiSimpleCard--xxs {
  padding: $sizeXs $sizeS;
}

.vuiSimpleCard--xs {
  padding: $sizeS $sizeM;
}

.vuiSimpleCard--s {
  padding: $sizeM $sizeL;
}

.vuiSimpleCard--m {
  padding: $sizeL $sizeXl;
}

.vuiSimpleCard--l {
  padding: $sizeXl $sizeXxl;
}