@import '../styles/vars.less';
@import '../styles/mixins.less';

@prefixCls : cuke-card;

.@{prefixCls} {
  border: 1px solid @border-color;
  border-radius: @border-radius;
  transition: all @default-transition;
  &.@{prefixCls}-shadow {
    box-shadow: @default-section-shadow;
  }
  &.@{prefixCls}-hover {
    &:hover {
      box-shadow: @default-shadow;
    }
  }
  &.@{prefixCls}-cover {
    overflow: hidden;
    img {
      width: 100%;
    }
    .@{prefixCls}-header {
      padding: 0;
      display: block;
      &-title {
        padding: @cuke-card-title-padding;
      }
    }
  }
  &-header {
    padding: @cuke-card-header-padding;
    box-sizing: border-box;
    border-bottom: 1px solid @border-color;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: @cuke-card-header-font-size;
    &-title {
      flex: 1 1 auto;
      &.@{prefixCls}-overflow-hidden {
        .ellipsis(1);
      }
    }
    &-extra {
      text-align: right;
      flex: 0 0 15%;
      .ellipsis(1);
    }
  }
  &-content {
    padding: @cuke-card-content-padding;
  }
  &-actions {
    border-top: 1px solid @border-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-item {
      text-align: center;
      padding: 12px 0;
      flex: 1;
      background-color: @bg-color;
      cursor: pointer;
      font-size: @font-size;
      color: @font-color;
      transition: color @default-transition;

      &:hover {
        color: @primary-color;
      }

      & + .@{prefixCls}-actions-item {
        border-left: 1px solid @border-color;
      }
    }
  }
}
