@use 'mixins/mixins'as *;

#{getClassName((card))} {
  border-radius: #{getValName((card, border-radius))}; // #{getValName((border, radius, soft))};
  background-color: #{getValName((card, background-color))};
  overflow: hidden;
  transition: 0.3s;
  border: #{getValName((card, border))};
}

#{getClassName((card))} {
  #{joinValName((card, border))}: 1px solid #{getValName((color, neutral, 2))};
  #{joinValName((card, shadow))}: 0px 0px 10px rgba(0, 0, 0, 0.1);
  @include set-css-val(card,
    ('border-radius': (border, radius, soft),
      'background-color': (color, neutral, 0),
      'padding': (space, base)))
}

// --os-card-shadow
#{getClassName((card, shadow))} {
  box-shadow: #{getValName((card, shadow))};
}

#{getClassName((card, shadow, hover))}:hover {
  box-shadow: #{getValName((card, shadow))};
}

#{getClassName((card, hd))} {
  padding: #{getValName((card, padding))};
  font-size: #{getValName((heading6))};
  display: flex;
  justify-content: space-between;

  +#{getClassName((card, bd))} {
    padding-top: #{getValName((card, padding))};
  }
}

#{getClassName((card, bd))} {
  padding: #{getValName((card, padding))};
}

#{getClassName((card, ft))} {
  padding: #{getValName((space, none))} #{getValName((card, padding))} #{getValName((card, padding))} #{getValName((card, padding))};
}