@import './colors.scss';
@import './fonts.scss';

@mixin button-theme($themeName, $backgroundColor) {
  .#{$themeName} {
    composes: button;

    background-color: $backgroundColor;

    &:hover {
      background-color: lighter($backgroundColor);
    }

    &:active {
      background-color: darker($backgroundColor);
    }
  }
}

.button {
  display: inline-block;
  box-sizing: border-box;
  height: 50px;
  padding: 0 15px;
  border: none;
  border-radius: 0;

  font-family: $font-family-title;
  color: $defaultButtonTextColor;
  font-size: 18px;
  line-height: 50px;
  text-decoration: none;
  cursor: pointer;

  transition: 0.25s;

  &:hover {
    color: $defaultButtonTextColor;
  }

  &:focus {
    outline: none;
  }
}

.smallButton {
  composes: button;

  height: 30px;
  padding: 0 15px;
  font-size: 14px;
  line-height: 30px;
}

.white {
  composes: button;

  background-color: #fff;
  color: #444;

  &:hover {
    color: #262626;
    background-color: $whiteButtonLight;
  }

  &:active {
    background-color: $whiteButtonDark;
  }
}

@include button-theme('black', $black);
@include button-theme('blue', $blue);
@include button-theme('green', $green);
@include button-theme('orange', $orange);
@include button-theme('darkBlue', $dark_blue);
@include button-theme('lightViolet', $light_violet);
@include button-theme('violet', $violet);
@include button-theme('red', $red);

.block {
  display: block;
  width: 100%;
}

.loading {
  background: url('./form/images/loader_button.gif') #95a5a6 center center !important;

  cursor: default;
  color: #fff;
  transition: 0.25s;
  outline: none;
  pointer-events: none;
}

.black.disabled {
  background: #95a5a6;
  cursor: default;
}

.disabled {
  cursor: default;
  pointer-events: none;
}