@import './variables';

.btn-western {
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 1rem;
  color: $main-color;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  background: $gray-transparent-30;
  padding: 10px;

  icon {
    display: inline-block;
    margin-right: 10px;
  }

  &.btn-small {
    height: 34px;
    padding: 7px 15px;
    line-height: 20px;

    icon {
      width: 20px;
      height: 20px;
    }
  }

  &.btn-middle {
    height: 50px;
    padding: 10px 15px;
    line-height: 30px;

    icon {
      width: 30px;
      height: 30px;
    }
  }

  &.btn-big {
    height: 60px;
    padding: 10px 15px;
    font-size: 30px;
    line-height: 40px;

    icon {
      width: 40px;
      height: 40px;
    }
  }

  &[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

.wrapper-svg .btn-western + svg path {
  fill: $gray-transparent-30;
}

.wrapper-svg .btn-western + svg path {
  transition: fill 0.3s;
}

.wrapper-svg:hover .btn-western:not([disabled]),
.wrapper-svg .btn-western.active:not([disabled]) {
  + svg path {
    fill: $hover-color;
  }

  icon svg {
    fill: $hover-color-darken;
  }

  color: $hover-color-darken;
}

.wrapper-svg .btn-western {
  background: transparent;
}
