@import '../variable';

@keyframes button_striped_animation {
  from {
    background-position: 20px 0;
  }
  to {
    background-position: 0 0;
  }
}

button {
  display: inline-block;

  &:active,
  &:focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }
}

$border: 2px;

.button {
  background: none;
  font-family: Circe;
  font-size: 13px;
  display: inline-block;
  line-height: 36px;
  text-align: center;
  font-weight: 400;
  text-decoration: none;
  vertical-align: middle;
  color: $color-main-black;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  border-radius: $button-border-radius;
  min-width: 120px;
  padding: 0 12px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &_small {
    line-height: 30px;
  }

  &_small.button_stroke-green,
  &_small.button_stroke-blue,
  &_small.button_stroke-orange,
  &_small.button_stroke-grey,
  &_small.button_stroke-red,
  &_small.button_dashed-green,
  &_small.button_dashed-blue,
  &_small.button_dashed-orange,
  &_small.button_dashed-red,
  &_small.button_dashed-grey {
    line-height: 28px;
  }

  &:hover {
    opacity: 0.7;
    transition: 0.2s;
  }

  &:active {
    transform: scale(0.9);
    transition: none;
  }

  &:disabled {
    background-color: $color-additional-grey-background;
    color: $color-additional-grey-text;
    cursor: not-allowed;
  }

  &:disabled:hover {
    opacity: 1;
  }

  &:disabled:active {
    transform: none;
  }

  /*  Цвета кнопок*/

  &_green {
    background: linear-gradient(0deg, $color-main-green 0%, $color-additional-green 100%);
    color: $color-main-white;
  }

  &_blue {
    background: linear-gradient(180deg, $color-additional-blue 0%, $color-main-blue 100%);
    color: $color-main-white;

    /* Наклонная полоска*/
    &_striped {
      background-image: linear-gradient(135deg, #007bff 25%, #70b3ff 25%, #70b3ff 50%, #007bff 50%, #007bff 75%, #70b3ff 75%, #70b3ff 100%);
      background-size: 20px 20px;
      color: $color-main-white;

      /* Анимация полосок*/
      &.button_animation {
        animation: button_striped_animation 0.5s linear infinite;
      }
    }
  }

  &_yellow {
    background: linear-gradient(180deg, $color-additional-yellow 0%, $color-main-yellow 100%);
    color: $color-main-black;
  }

  &_orange {
    background: linear-gradient(180deg, $color-additional-orange 0%, $color-main-orange 100%);
    color: $color-main-white;
  }

  &_red {
    background: linear-gradient(0deg, $color-main-gradient-red 0%, $color-additional-gradient-red 100%);
    color: $color-main-white;
  }

  &_grey {
    background-color: $color-main-grey-text;
    color: $color-main-white;
  }

  /* с цветными рамками*/
  &_stroke-green {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(0deg, $color-main-green 0%, $color-additional-green 100%) border-box;
    border: 1px solid;
    color: $color-main-green;
    line-height: 34px;
  }

  &_stroke-green:hover {
    background: linear-gradient(0deg, $color-main-green 0%, $color-additional-green 100%);
    color: $color-main-white;
  }

  &_stroke-blue {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(180deg, $color-additional-blue 0%, $color-main-blue 100%) border-box;
    border: 1px solid;
    color: $color-main-blue;
    line-height: 34px;
  }

  &_stroke-blue:hover {
    background: linear-gradient(180deg, $color-additional-blue 0%, $color-main-blue 100%);
    color: $color-main-white;
  }

  &_stroke-blue:focus {
    background: linear-gradient(180deg, $color-additional-blue 0%, $color-main-blue 100%);
    color: $color-main-white;
  }

  &_stroke-orange {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(180deg, $color-additional-orange 0%, $color-main-orange 100%) border-box;
    border: 1px solid;
    color: $color-main-orange;
    line-height: 34px;
  }

  &_stroke-orange:hover {
    color: $color-main-white;
    background: linear-gradient(180deg, $color-additional-orange 0%, $color-main-orange 100%);
  }

  &_stroke-yellow {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(180deg, $color-main-yellow 0%, $color-additional-yellow 100%) border-box;
    border: 1px solid $color-main-yellow;
    color: $color-additional-orange;
    line-height: 34px;
  }

  &_stroke-yellow:hover {
    color: $color-main-black;
    background: linear-gradient(180deg, $color-main-yellow 0%, $color-additional-yellow 100%);
  }

  &_stroke-grey {
    border: 1px solid $color-main-grey-text;
    background-color: transparent;
    color: $color-main-grey-text;
    line-height: 34px;
  }

  &_stroke-grey:hover {
    background-color: $color-main-grey-text;
    color: $color-main-white;
  }

  &_stroke-red {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(0deg, $color-main-gradient-red 0%, $color-additional-gradient-red 100%) border-box;
    border: 1px solid;
    color: $color-main-gradient-red;
    line-height: 34px;
  }

  &_stroke-red:hover {
    background: linear-gradient(0deg, $color-main-gradient-red 0%, $color-additional-gradient-red 100%);
    color: $color-main-white;
  }

  /* Цветные прерывистые рамки*/
  &_dashed-green {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(0deg, $color-main-green 0%, $color-additional-green 100%) border-box;
    border: 1px dashed $color-main-white;
    color: $color-main-green;
    line-height: 34px;
  }

  &_dashed-blue {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(180deg, $color-additional-blue 0%, $color-main-blue 100%) border-box;
    border: 1px dashed $color-main-white;
    color: $color-main-blue;
    line-height: 34px;
  }

  &_dashed-orange {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(180deg, $color-additional-orange 0%, $color-main-orange 100%) border-box;
    border: 1px dashed $color-main-white;
    color: $color-main-orange;
    line-height: 34px;
  }

  &_dashed-red {
    background: linear-gradient($color-main-white, $color-main-white) padding-box,
      linear-gradient(0deg, $color-main-gradient-red 0%, $color-additional-gradient-red 100%) border-box;
    border: 1px dashed $color-main-white;
    color: $color-main-gradient-red;
    line-height: 34px;
  }

  &_dashed-grey {
    border: 1px dashed $color-main-grey-text;
    background-color: transparent;
    color: $color-main-grey-text;
    line-height: 34px;
  }
}