@use "./../../../../../assets/style/colors.scss" as *;

.btn {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  width: fit-content;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 24px;
  background-color: $pure-blue;
  border: 1px solid $pure-blue;
  transition: 300ms ease-in-out;
  cursor: pointer;
  p {
    color: $white;
    font-size: 18px;
    font-weight: 600;
    margin: 0 4px 0 0;
  }
  &:not(:disabled):hover {
    background-color: $white;
    border: 1px solid $pure-blue;
    p {
      transition: 300ms ease-in-out;
      color: $pure-blue;
    }
    .icon {
      transition: 300ms ease-in-out;
      filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
        saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%);
    }
  }
  &:disabled {
    background-color: $dark-gray;
    color: color-mix(in srgb, $white 90%, $black 10%);
    border: 1px solid $dark-gray;
    cursor: default;
  }
  .icon {
    height: 24px;
    width: auto;
    margin: 0 4px 0 0;
  }
  &.reverse {
    flex-direction: row-reverse;
  }
  &.reverse .icon {
    margin-right: 0;
    margin: 0 0 0 4px;
  }
  &.reverse p {
    margin: 0 0 0 4px;
  }
}
