@use "../../style/variables" as *;
@use './mixin' as *;

.#{$prefix}-card {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-radius: var(--ty-card-radius, var(--ty-border-radius));
  transition: all 0.3s;
  background-color: var(--ty-card-bg, var(--ty-color-bg-container));

  & > img:first-child {
    border-radius: var(--ty-card-radius, var(--ty-border-radius)) var(--ty-card-radius, var(--ty-border-radius)) 0 0;
  }

  &_outlined {
    border: 1px solid var(--ty-card-border, var(--ty-color-border-secondary));
  }

  &_elevated {
    box-shadow: var(--ty-card-shadow, var(--ty-shadow-card));
  }

  &_filled {
    background-color: var(--ty-card-bg-filled, var(--ty-color-fill));
  }

  &_hoverable {
    cursor: pointer;

    &:hover {
      @include card-elevation;
    }
  }

  &_active {
    @include card-elevation;
  }

  &__header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: var(--ty-card-header-padding, $card-header-padding);
    color: var(--ty-card-header-color, var(--ty-color-text-heading));
    font-weight: var(--ty-card-header-font-weight, var(--ty-font-weight-medium));
    font-size: var(--ty-card-header-font-size, var(--ty-font-size-base));
    background: transparent;
    border-bottom: 1px solid var(--ty-card-border, var(--ty-color-border-secondary));
    border-radius: var(--ty-card-radius, var(--ty-border-radius)) var(--ty-card-radius, var(--ty-border-radius)) 0 0;
  }

  &__body {
    box-sizing: border-box;
    padding: var(--ty-card-body-padding, $card-body-padding);
  }

  &__footer {
    box-sizing: border-box;
    padding: var(--ty-card-footer-padding, $card-footer-padding);
  }
}