@use '~styles/global' as *;

.button {
  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  background-color: transparent;

  transition:
    background 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

  cursor: pointer;
}

.textButton {
  width: 100%;
  overflow: hidden;

  gap: 0.5rem;

  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.25rem;

  padding: 1.75rem;

  position: relative;

  border-radius: 100px;

  isolation: isolate;

  &::before {
    width: 10%;

    margin: auto;

    position: absolute;
    z-index: -1;

    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    border-radius: 50%;

    content: '';

    inset: 0;
    aspect-ratio: 1;
  }

  &:active::before {
    transform: scale(20);
    opacity: 1;

    transition: transform 800ms;
  }

  img,
  svg {
    width: 0.875rem;
  }
}

@mixin text($color, $hover) {
  color: $color;

  &:hover {
    color: $color;

    background-color: $hover;
  }

  svg,
  path {
    fill: $color;
  }
}

@mixin container($bg, $color, $hover) {
  color: $color;

  background-color: $bg;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);

  &:hover {
    background-color: $hover;
    box-shadow:
      0 2px 4px -1px rgba(0, 0, 0, 0.2),
      0 4px 5px 0 rgba(0, 0, 0, 0.14),
      0 1px 10px 0 rgba(0, 0, 0, 0.12);
  }

  svg,
  path {
    fill: $color;
  }
}

@mixin outlined($color, $border, $hover) {
  color: $secondaryPurple;

  border: 1px solid $border;

  &:hover {
    color: $secondaryPurple;

    background-color: $pressing;

    transition: 0.3s;
  }

  svg,
  path {
    fill: $color;
  }
}

.textButton {
  &.text {
    &.primary {
      @include text($secondaryPurple, $primaryPurple);
    }

    &.secondary {
      @include text($primaryWhite, rgba(255, 255, 255, 0.15));
    }

    &.disabled {
      &:hover {
        background: none;
        background-color: transparent;

        cursor: not-allowed;
      }
      @include text($primaryGray, $primaryGray);
    }
  }

  &.container {
    &.primary {
      @include container($secondaryPurple, $primaryWhite, $tertiaryPurple);
    }

    &.secondary {
      @include container($primaryWhite, $secondaryPurple, $primaryPurple);
    }

    &.disabled {
      &:hover {
        background: none;
        background-color: $primaryGray;

        cursor: not-allowed;
      }
      @include container($primaryGray, $secondaryGray, $secondaryGray);
    }

    &.disabled,
    &.disabled:hover,
    &.disableElevation,
    &.disableElevation:hover {
      box-shadow: none;
    }
  }

  &.outlined {
    &.primary {
      @include outlined($secondaryPurple, $secondaryGray, $primaryPurple);
    }

    &.secondary {
      @include outlined(
        $primaryWhite,
        $primaryWhite,
        rgba(255, 255, 255, 0.15)
      );
    }

    &.disabled {
      &:hover {
        color: $secondaryGray;

        border: 1px solid $pressing;

        background-color: transparent;
        background-color: $primaryWhite;

        cursor: not-allowed;
      }
    }
  }
}

.circleButton {
  width: fit-content;

  border-radius: 50%;
  aspect-ratio: 1;

  &.text {
    &.primary {
      @include text($secondaryPurple, $primaryPurple);
    }

    &.secondary {
      @include text($primaryWhite, rgba(255, 255, 255, 0.15));
    }

    &.gray {
      @include text($secondaryGray, $primaryGray);
    }

    &.disabled {
      &:hover {
        background: none;
        background-color: transparent;

        cursor: not-allowed;
      }
      @include text($primaryGray, $primaryGray);
    }
  }

  &.container {
    &.primary {
      @include container($secondaryPurple, $primaryWhite, $tertiaryPurple);
    }

    &.secondary {
      @include container(
        $primaryWhite,
        $secondaryPurple,
        rgba(255, 255, 255, 0.75)
      );
    }

    &.disabled {
      &:hover {
        background: none;
        background-color: $primaryGray;

        cursor: not-allowed;
      }
      @include container($primaryGray, $secondaryGray, $secondaryGray);
    }

    &.primary,
    &.secondary {
      box-shadow: none;

      &:hover {
        box-shadow: none;
      }
    }
  }

  &.outlined {
    &.primary {
      @include outlined($secondaryGray, $secondaryGray, $primaryPurple);
    }

    &.secondary {
      @include outlined(
        $primaryWhite,
        $primaryWhite,
        rgba(255, 255, 255, 0.15)
      );
    }

    &.disabled {
      &:hover {
        background: none;
        background-color: transparent;

        cursor: not-allowed;
      }
      @include outlined($primaryGray, $primaryGray, rgba(255, 255, 255, 0.15));
    }
  }
}
