@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.storybook-button {
  width: auto;
  background-color: $white;
  border-radius: 5px;
  color: $white;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  @extend .fontMontserratSemiboldXs;

  &--transparent {
    background-color: transparent;
  }
}

.storybook-button--primary {
  color: $primary;
  border: 1px solid $primary;
  &:hover {
    background-color: $primary;
    color: $white;
  }

  &:active {
    background-color: $primary;
    color: $white;
  }

  &:disabled {
    color: $primary;
    background-color: $white;
    opacity: 0.5;
    cursor: no-drop;
  }
}
.storybook-button--secondary {
  color: $grey_9;
  border: 1px solid $grey_9;

  &:hover {
    background-color: $grey_9;
    color: $white;
  }

  &:active {
    background-color: $grey_9;
    color: $white;
  }

  &:disabled {
    color: $grey_9;
    background-color: $white;
    opacity: 0.5;
    cursor: no-drop;
  }
}
.storybook-button--danger {
  color: $error;
  border: 1px solid $error;

  &:hover {
    background-color: $error;
    color: $white;
  }

  &:active {
    background-color: $error;
    color: $white;
  }

  &:disabled {
    color: $error;
    background-color: $white;
    opacity: 0.5;
    cursor: no-drop;
  }
}
.storybook-button--success {
  color: $success;
  border: 1px solid $success;

  &:hover {
    background-color: $success;
    color: $white;
  }

  &:active {
    background-color: $success;
    color: $white;
  }

  &:disabled {
    color: $success;
    background-color: $white;
    opacity: 0.5;
    cursor: no-drop;
  }
}
.storybook-button--small {
  font-size: 10px;
  padding: 4px 8px;
}
.storybook-button--medium {
  font-size: 10px;
  padding: 6px 12px;
}
.storybook-button--large {
  font-size: 14px;
  padding: 8px 16px;
}
.storybook-button-with-icon {
  @extend .fontMontserratMediumSm;

  display: flex;
  align-items: center;
  border-radius: 20px;
  border: 1px solid transparent;
  padding: 0;
  &--primary {
    background-color: $primary-light;
    .button-icon {
      span {
        svg {
          color: $primary !important;
        }
      }
    }
    .icon-button-label {
      color: $primary;
    }
    &:hover {
      border: 1px solid $primary;
    }
  }
  &--secondary {
    background-color: $grey_9;
    .button-icon {
      span {
        svg {
          color: $grey_9 !important;
        }
      }
    }
    &:hover {
      border: 1px solid $grey_9;
    }
  }
  &--danger {
    color: $white;
    background-color: $error;
    .button-icon {
      span {
        svg {
          color: $error !important;
        }
      }
    }
    &:hover {
      border: 1px solid $error;
    }
  }
  &--success {
    color: $white;
    background-color: $success;
    .button-icon {
      span {
        svg {
          color: $success !important;
        }
      }
    }
    &:hover {
      border: 1px solid $success;
    }
  }
  &:disabled {
    opacity: 0.5;
    cursor: no-drop;
  }
  &--right {
    flex-direction: row-reverse;
  }
  .icon-button-label {
    padding: 0 8px;
  }
}