@import url(../var.less);

@card-prefix: ~"@{prefix}card";

.@{card-prefix}{
  border-radius: @card-border-radius;
  border: 1px solid @card-border-color;
  background-color: @color-white;
  overflow: hidden;
  color: @primary-text-color;
  transition: 0.3s;

  &.is-always-shadow {
    box-shadow: @card-shadow;
  }

  &.is-hover-shadow {
    &:hover,
    &:focus {
      box-shadow: @card-shadow;
    }
  }

  &__header {
    padding: @card-padding;
    border-bottom: 1px solid @card-border-color;
    box-sizing: border-box;
  }

  &__body {
    padding: @card-padding
  }

  &.is-no-bordered {
    border: transparent;
  }

  &--small {
    .w-card__header {
      padding: @card-small-padding;
    }
  }
}