//global imports
@import '../../styles/global.colors.scss';
@import '../../styles/global.fonts.scss';

.buttonContainer {
  color: $light-gray-text-color;
  width: max-content;
  cursor: pointer;
  margin-inline: auto;
  margin-top: 40px;
  margin-bottom: 28px;
  .button {
    display: flex;
    @include BoldDark16Mixin;
    justify-content: center;
    align-items: center;
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    width: 208px;
    height: 44px;
    &.primary {
      border-color: $light-gray-text-color;
    }

    &.secondary {
      background-color: $primary-blue-color;
      color: white;
    }

    &:disabled {
      background-color: #ccc;
      color: #fff;
      border: 2px solid #ccc;
      cursor: not-allowed;
    }
  }
  &:hover {
    color: $light-gray-text-color;
  }
}