@use '../../internals/Box/styles/index' as box;

//
// Card
// --------------------------------------------------

.rs-card {
  --rs-card-width: 100%;
  --rs-card-padding: calc(var(--rs-spacing) * 4);
  --rs-card-shadow: var(--rs-shadow-md);

  display: flex;
  flex-direction: column;
  border-radius: var(--rs-radius-md);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  width: var(--rs-card-width);

  &[data-bordered='true'] {
    border: 1px solid var(--rs-border-primary);
    background-color: var(--rs-card-bg);
  }

  &[data-shaded='true'] {
    box-shadow: var(--rs-card-shadow);
  }

  &[data-shaded='hover']:hover {
    box-shadow: var(--rs-card-shadow);
    cursor: pointer;
  }

  &[data-size='sm'] {
    --rs-card-padding: calc(var(--rs-spacing) * 2);
  }

  &[data-size='md'] {
    --rs-card-padding: calc(var(--rs-spacing) * 4);
  }

  &[data-size='lg'] {
    --rs-card-padding: calc(var(--rs-spacing) * 6);
  }

  &[data-direction='row'] {
    flex-direction: row;
  }

  &-header {
    padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
  }

  &-body {
    padding: var(--rs-card-padding);
  }

  &-footer {
    display: flex;
    gap: 8px;
    padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
  }
}