@import 'src/css/quasar.variables.scss';

.btn {
  color: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
    Noto Color Emoji;
}

.btn--sm {
  border-radius: 30px;
  font-weight: 700;
  width: 120px;
  height: 24px;
  padding-bottom: 1px;
  background-color: $astar-blue;
  @media (min-width: $md) {
    width: 100px;
    background-color: transparent;
    color: $astar-blue;
    transition: all 0.3s ease 0s;
    &:hover {
      transition: all 0.3s ease 0s;
      color: #ffffff;
      background-color: $astar-blue;
      &:disabled {
        background-color: $gray-4 !important;
      }
    }
  }
}

.body--dark {
  .btn--sm {
    background-color: $astar-blue;
    @media (min-width: $md) {
      background-color: transparent;
      color: $astar-blue;
      &:hover {
        color: #ffffff;
        background-color: $astar-blue;
        &:disabled {
          background-color: $gray-5 !important;
        }
      }
    }
  }
}
