@import 'variables';

@mixin link-primary {
  color: $gray-dark;
  font-weight: 500;

  &:hover {
    color: $blue;
  }
}

@mixin link-secondary {
  color: $blue;

  &:hover {
    color: $blue-dark;
  }
}

@mixin button-primary {
  background-color: $blue;
  border-color: $blue;
  color: $white;

  &:hover,
  &:focus:not([data-toggle='modal']) {
    color: $blue;
    background-color: $white;
    border-color: $blue;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $blue-darker;
    border-color: $blue-darker;
  }

  &:hover {
    span {
      a {
        color: $blue;
        text-decoration: none;
      }
    }
  }
}

@mixin button-secondary {
  background-color: $white;
  border-color: $blue;
  color: $blue;

  &:hover,
  &:focus:not([data-toggle='modal']) {
    color: $white;
    background-color: $blue;
    border-color: $blue;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $blue-darker;
    border-color: $blue-darker;
  }

  &[disabled] {
    background-color: $gray-600;
    border-color: $gray-600;
  }
}

@mixin button-action {
  background-color: $green;
  border-color: $green;
  color: $white;

  &:hover,
  &:focus {
    color: $green;
    background-color: $white;
    border-color: $green;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $green-dark;
    border-color: $green-dark;
  }
}

@mixin button-danger {
  background-color: $red;
  border-color: $red;
  color: $white;

  &:hover,
  &:focus {
    color: $red;
    background-color: $white;
    border-color: $red;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $red-dark;
    border-color: $red-dark;
  }

  &[disabled],
  &.disabled {
    border-color: $red;
  }
}

@mixin button-large {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 1rem;
  line-height: 1.5;
}

@mixin button-small {
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 500;
}

@mixin button-full {
  width: 100%;
}

@mixin button-min160 {
  min-width: 160px;

  @include media-breakpoint-down(sm) {
    @include button-full;
  }
}

@mixin button-slider {
  font-size: 1.25rem;
  height: 30px;
  line-height: normal;
  padding: 2px 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 1;
}

@mixin button-thumbs {
  background: transparent;
  border: 0;
  font-size: 20px;
  height: 24px;
  line-height: 20px;
  padding: 2px 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  z-index: 1;
}

@mixin button-toggle {
  font-size: 12px;
  height: 18px;
  line-height: normal;
  padding: 0;
  width: 18px;
  color: $warm-grey;
  border-radius: 2px;
  border-color: transparent;
}

@mixin switch {
  position: relative;
  display: inline-block;
  min-width: 48px;
  height: 28px;

  &-label {
    display: flex;
    align-items: center;
  }

  &__text {
    padding-left: 10px;

    &-before {
      padding-left: 0;
      padding-right: 10px;
    }
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    background-color: $gray;
    transition: .4s;

    &:before {
      position: absolute;
      content: '';
      height: 20px;
      width: 20px;
      left: 4px;
      bottom: 4px;
      border-radius: 50%;
      background-color: $white;
      transition: .4s;
    }
  }

  input {
    &:not(:disabled) {
      &:checked + .slider {
        background-color: $blue-transparent3;

        &:before {
          background-color: $blue;
        }
      }
    }

    &:checked + .slider {
      &:before {
        transform: translateX(19px);
      }
    }

    &:disabled {
      pointer-events: none;
    }
  }

  &-vat {
    height: 22px;

    &-label {
      margin: 0;

      .switch__text,
      .switch__text-before {
        color: $white;
      }

      .switch__text-before {
        font-weight: 700;
      }

      &.switch-label__checked {
        .switch__text-before {
          font-weight: 400;
        }

        .switch__text {
          font-weight: 700;
        }
      }
    }

    .slider {
      &:before {
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
      }
    }

    input {
      &:not(:disabled) {
        &:checked + .slider {
          background-color: $blue;

          &:before {
            background-color: $white;
          }
        }
      }

      &:checked + .slider {
        &:before {
          transform: translateX(25px);
        }
      }
    }
  }

  @include media-breakpoint-up(lg) {
    &-vat {
      &-label {
        .switch__text,
        .switch__text-before {
          color: $blue-dark;
        }
      }
    }
  }
}

@mixin button-transparent {
  padding: 5px 12px;
  background: transparent;
  border-color: $gray;
  color: $black;

  &:hover,
  &:focus {
    border-color: $blue;
  }

  &__text {
    font-size: 1rem;
    font-weight: 400;
    padding-right: 10px;
  }

  &__icon {
    margin-right: 3px;
    font-size: 1rem;
    color: $blue;
  }
}

@mixin button-pending {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $black-transparent20;
  }

  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    width: 24px;
    height: 24px;
    border: 1px solid $white;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s infinite linear;
  }
}

@mixin square-cta {
  text-decoration: none;
  border: 1px solid $blue-dark;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 110px;
  height: 110px;
  transition: all .3s;
  padding: 10px;

  svg {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  span {
    width: 100%;
    text-align: center;
    color: $blue-dark;
    margin-bottom: 0;
    font-weight: 400;
    font-size: .75rem;
    line-height: 1rem;
    margin-top: 10px;
  }

  &.active {
    background: $blue-dark;

    span {
      color: $white;
    }

    &:hover {
      text-decoration: none;
      background: $white;

      span {
        color: $blue-dark;
      }

      svg path {
        stroke: $blue-dark;
      }
    }
  }

  &:hover:not(.active) {
    text-decoration: none;
    background: $blue-dark;

    span {
      color: $white;
    }

    svg path {
      stroke: $white;
    }
  }

  &:disabled,
  &[disabled] {
    pointer-events: none;
    opacity: .4;
  }
}