@import '../../../../globals/variables';
@import '../../../../globals/mixins';
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.button-publish {
  display: flex;
  justify-content: center;
  width: 100%;
}

.button-publish__button {
  border: 0.125rem solid transparent;
  border-radius: 1.563rem;
  padding: 0.8rem;
  width: 7.563rem;

  @include respond-to('medium') {
    padding: 0.2rem;
    width: 19.438rem;
  }

  &--primary {
    background: $ads-quintary-main;
    color: $ads-color-main;

    &:hover {
      background: #002a40;
    }
  }

  &--secondary {
    background: $ads-secondary-main;
    color: $ads-color-main;

    &:hover {
      background: #00101a;
    }
  }

  &--tertiary {
    background: $ads-tertiary-main;
    border: 0.063rem solid #6c757d;
    color: $ads-text-secondary;

    &:hover {
      background: #ccc;
      color: $ads-text-main-hover;
    }
  }

  &--warning {
    background: $ads-warning-main;
    color: $ads-color-main;

    &:hover {
      background: #8a6d00;
    }
  }

  &--danger {
    background: $ads-danger-main;
    color: $ads-color-main;

    &:hover {
      background: #801c24;
    }
  }
}

.button-publish__label {
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: $ads-font-weight;
  line-height: 0.914rem;
  text-align: center;
  text-transform: uppercase;

  @include respond-to('medium') {
    font-size: 1.5rem;
    line-height: 1.829rem;
  }
}
