@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";

.button {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  font-weight: 600;
  font-family: variables.$font;
  border-radius: 10px;
  font-size: .9rem;
  font-family: variables.$font;
  @media only screen and (max-width: 1000px) {
    height: 50px;
  }
  &[data-loading="true"] {
    background-color: variables.$col-primary-btn;
    opacity: 0.5;
    flex-wrap: nowrap;
  }

  &:focus {
    background: variables.$col-primary-btn;
  }

  &-primary {
    background-color: variables.$col-primary-btn;
    color: variables.$col-primary;
  }

  &-small {
    height: 40px;
  }

  &-curve {
    border-radius: toRem(8px);
  }

  &-disabled {
    //     background-color: $col-primary-2;
    color: #FFF;
    opacity: 0.3;
    cursor: not-allowed;

    &-text {
      width: fit-content;
      height: fit-content;
    }
  }

  &-alternate {
    background-color: variables.$col-primary;
    color: #FFF;
  }
  &-google {
    background-color: #FFF;
    //     color: $col-text;
    // border: toRem(1px) solid $col-grey;
    // @use flex-row;
    align-items: center;

    &:hover,
    &:focus {
      background: none;
    }

    &_icon {
      margin-right: toRem(10px);
      // @use grid-center;
    }
  }

  &-plain {
    // border: toRem(1px) solid $col-grey-light;

    &:hover,
    &:focus {
      background: none;
    }
  }

  &-color {
    &-primary {
      color: variables.$col-primary;
    }
    &-light {
      color: #FFF;
    }
    &-dark {
      color: #343434;
    }
  }

  &-loader {
    display: inline-flex;
    margin-left: 20px;
    width: fit-content;
    height: fit-content;

    & span {
      display: block !important;
    }

    svg {
      width: 2.1em;
      transform-origin: center;
      animation: rotate 2s linear infinite;
    }

    circle {
      fill: none;
      stroke: #FFF;
      stroke-width: 2;
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
      }
      100% {
        stroke-dashoffset: -125px;
      }
    }
  }
}