@import 'xtend-library/src/core/card/_card.less';

/**
 * vars
 */

// generate class: [false], [true] non responsive only, [sm, md, lg] responsive @breakpoints

@generate-card-group: sm, md, lg;
@generate-box-horizontal: sm, md, lg;

/**
 * card
 */

.card {
  border-radius: 6px;
  .card-design {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
  }
  // default options
  .card-medium();
}

// preset

.card-drop {
  border-radius: inherit;
  width: 100vw; // fill size max-width
  // default options
  .drop.drop-small.card-drop();
  // custom blocks
  .card-block-intro {
    background: fade(@accent, 15%);
  }
  .card-block-side {
    background: fade(@accent, 15%);
  }
}

.card-overlay {
  border-radius: inherit;
  align-items: center;
  > .btn-close {
    .btn-big();
    .btn-icon();
    top: 2rem;
    right: 2rem;
  }
  // default options
  .overlay.overlay-large.card-overlay();
  // custom blocks
  .card-block-intro {
    background: fade(@accent, 15%);
  }
  .card-block-side {
    background: fade(@accent, 15%);
  }
}

.card-slide {
  // default options
  .card-default();
  .card-content {
    .align-center();
  }
  // activation
  .xt-slider:not(.xt-disabled) & {
    opacity: 0.5;
  }
  .xt-slider:not(.xt-disabled) .slide.active & {
    opacity: 1;
  }
}

// variant

.card-default {
  .text-default();
  .card-design {
    border-color: @shade-100;
    background: @shade-100;
  }
  // custom blocks
  .card-block-intro {
    background: fade(@accent, 15%);
  }
  .card-block-side {
    background: fade(@accent, 15%);
  }
}

.card-primary {
  .text-inverse();
  .card-design {
    border-color: @accent;
    background: @accent;
  }
  // custom blocks
  .card-block-intro {
    background: fade(@black, 15%);
  }
  .card-block-side {
    background: fade(@black, 15%);
  }
}

.card-white {
  .text-default();
  .card-design {
    border-color: @white;
    background: @white;
  }
  // custom blocks
  .card-block-intro {
    background: fade(@accent, 15%);
  }
  .card-block-side {
    background: fade(@accent, 15%);
  }
}

// size

.card-small {
  .card-block {
    .card-block.card-block-small();
  }
}

.card-block-small {
  .card-block.card-block-small() !important;
}

.card-block.card-block-small {
  .font-tiny();
  .line-height-small();
  padding: 2rem;
  .card-title {
    .h4();
  }
}

.card-medium {
  .card-block {
    .card-block.card-block-medium();
    // smaller on mobile
    @media @max-sm {
      .card-block.card-block-small();
    }
  }
}

.card-block-medium {
  .card-block.card-block-medium() !important;
  // smaller on mobile
  @media @max-sm {
    .card-block.card-block-small() !important;
  }
}

.card-block.card-block-medium {
  .font-small();
  .line-height-medium();
  padding: 2.5rem;
  .card-title {
    .h4();
  }
}

.card-large {
  .card-block {
    .card-block.card-block-large();
    // smaller on mobile
    @media @max-sm {
      .card-block.card-block-medium();
    }
  }
}

.card-block-large {
  .card-block.card-block-large() !important;
  // smaller on mobile
  @media @max-sm {
    .card-block.card-block-medium() !important;
  }
}

.card-block.card-block-large {
  .font-medium();
  .line-height-medium();
  padding: 3rem;
  .card-title {
    .h3();
  }
}

// special

.card-nodesign {
  .card-design {
    display: none;
  }
}

.card-squared {
  border-radius: 0;
}

.card-noborder {
  .card-design {
    border: 0;
  }
}

.card-none {
  .card-block {
    .padding(all, none);
  }
}

.card-none-x {
  .card-block {
    .padding(x, none);
  }
}

.card-none-y {
  .card-block {
    .padding(y, none);
  }
}

// special

.card-overflow-y {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 30rem;
  .overflow-style(@mode: inner);
}

.card-disable {
  .text-default();
  .card-block, .card-content {
    opacity: 1;
    .transform-none();
    .trans-anim-none();
  }
  > .btn-close {
    display: none;
  }
}