@use 'sass:map';
@use '@ecl/theme-ec/theme' as *;

%card {
  align-items: center;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  flex-basis: 8rem;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  margin: var(--ws-s-xs) var(--ws-s-xs) 0 0;
  max-width: 8rem;
  padding: var(--ws-s-s);
}

.card {
  // stylelint-disable-next-line at-rule-no-unknown
  @extend %card;

  background-color: map.get($color, 'white');
  border-color: var(--ws-c-n-60);
  color: var(--ws-c-d);

  &:hover {
    background-color: var(--ws-c-d);
    border-color: map.get($theme, 'color', 'black');
    color: map.get($theme, 'color', 'white');
  }
}

.card--negative {
  // stylelint-disable-next-line at-rule-no-unknown
  @extend %card;

  background-color: var(--ws-c-d);
  border-color: var(--ws-c-d);
  color: map.get($theme, 'color', 'white');

  &:hover {
    border-color: map.get($theme, 'color', 'black');
  }
}

.card--light {
  // stylelint-disable-next-line at-rule-no-unknown
  @extend %card;

  background-color: map.get($color, 'white');
  border-color: var(--ws-c-n-60);
  color: var(--ws-c-d);

  &:hover {
    border-color: map.get($theme, 'color', 'black');
  }
}

.title {
  box-sizing: border-box;
  font: var(--ws-f-s);
  margin: var(--ws-s-s) 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.icon {
  fill: currentcolor;
  height: map.get($theme, 'icon', 'l');
  width: map.get($theme, 'icon', 'l');
}
