@import "@/common/styles/colors"

.server-dialog
  margin: 1rem 0.5rem 0 0.5rem
  max-height: 17rem
  overflow-y: scroll

.server-dialog .button-area
  margin-top: 1rem
  display: flex
  justify-content: flex-end

.server-area
  display: flex
  flex-direction: column
  gap: 1rem
  width: 30rem

  .no-servers
    text-align: center
    color: $darker-white
    font-weight: 500

.server-dialog-button
  background-color: transparent
  color: $darker-white
  font-weight: 700
  font-size: 14pt
  cursor: pointer
  border: 2px solid transparent
  padding: 0.5rem 1rem
  border-radius: 0.5rem

  &:hover
    background-color: $dark-gray
    color: $white
    transition: all 0.3s


@media screen and (max-width: 570px)
  .server-area
    width: 100%