@import 'xtend-library/src/core/button/_button.less';

/**
 * button
 */

.btn {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  .font-sans-semibold();
  .line-height-mini();
  letter-spacing: .025em;
  text-transform: uppercase;
  // default options
  .btn-medium();
}

// variant

.btn-default {
  .link-none();
  border-color: @shade-100;
  background: @shade-100;
  color: @text;
  &:hover, &.hover {
    border-color: @shade-200;
    background: @shade-100;
    color: @text;
  }
  &:active, &.active {
    border-color: @shade-200;
    background: @shade-200;
    color: @text;
  }
}

.btn-primary {
  .link-none();
  border-color: @accent;
  background: @accent;
  color: @text-inverse;
  &:hover, &.hover {
    border-color: @accent-dark;
    background: @accent;
    color: @text-inverse;
  }
  &:active, &.active {
    border-color: @accent-dark;
    background: @accent-dark;
    color: @text-inverse;
  }
}

.btn-text {
  .link-none();
  .btn-nodesign();
  .btn-noeffect();
  color: inherit;
  &:hover, &.hover {
    color: inherit;
    opacity: .75;
  }
  &:active, &.active {
    color: inherit;
    opacity: 1;
  }
}

.btn-link {
  .btn-nodesign();
  .btn-noeffect();
  // reset
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

// size

.btn-tiny {
  padding: .5em 1em;
  font-size: 10px;
}

.btn-small {
  padding: .6em 1.2em;
  font-size: 1.2rem;
}

.btn-medium {
  padding: .625em 1.225em; // @FIX odd rem with .025 added
  font-size: 1.3rem;
}

.btn-large {
  padding: .6em 1.2em;
  font-size: 1.4rem;
}

.btn-big {
  padding: .625em 1.225em; // @FIX odd rem with .025 added
  font-size: 1.5rem;
}

// special

.btn-nodesign {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  &:hover, &.hover, &:active, &.active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

.btn-noeffect {
  .transform-none();
  &:hover, &.hover, &:active, &.active {
    .transform-none();
  }
}

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

.btn-noborder {
  border: 0;
}

.btn-tall {
  padding-top: .9em;
  padding-bottom: .9em;
}

.btn-short {
  padding-top: .3em;
  padding-bottom: .3em;
}

.btn-wide {
  padding-left: 1.8em;
  padding-right: 1.8em;
}

.btn-narrow {
  padding-left: .6em;
  padding-right: .6em;
}

.btn-none {
  .btn-nodesign();
  .btn-squared();
  .padding(all, none);
}

.btn-none-x {
  .btn-nodesign();
  .btn-squared();
  .padding(x, none);
}

.btn-none-y {
  .btn-nodesign();
  .btn-squared();
  .padding(y, none);
}

.btn-icon {
  line-height: 1;
  padding: .8em .8em;
}

// animation

.btn {
  transition: all @time-small @ease-out;
  &:hover, &.hover {
    transition: all @time-small @ease-in;
  }
  &:active, &.active {
    transition: all @time-small @ease-in;
  }
}

// custom

.btn-close {
  cursor: pointer;
  position: absolute !important;
  top: 1rem;
  right: 1rem;
  .btn-text();
  .btn-small();
  .btn-icon();
  .icon-xt(@content: @icon-xt-close, @size: @icon-medium);
}