sparkletown/sparkle

@import "scss/constants.scss";

$spacing: 15px;
$close-icon-width: 20px;
$message-margin: $spacing + $close-icon-width + 5px;
$action-button-height: 30px;
$action-button-padding: 6px;
$announce-box-shadow: 0px 2px 20px 5px;

.AnnouncementMessage {
  display: block;
  background: $announcement-background;
  width: $announcement-container-width;
  max-width: 100%;
  height: auto;
  min-height: 70px;
  transition: left 0.1s linear;
  padding: $spacing 0;
  backdrop-filter: blur(50px);
  text-align: center;
  position: fixed;
  border-radius: 0px 0px $border-radius--xl $border-radius--xl;
  border: 1px solid var(--accent--over-40a);
  border-top: none;
  box-sizing: border-box;
  box-shadow: $announce-box-shadow opaque-white(0.35);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: z(announcement-banner);

  &__admin {
    position: absolute;
  }

  &--withButton {
    min-height: $announcement-container-height;
  }

  &__fullscreen {
    position: fixed;
    border: 1px solid var(--accent--over-40a);
    z-index: z(announcement-banner);
    border-radius: $border-radius--xl;
    top: 40%;
    border-radius: 16px;

    &--admin {
      position: relative;
      left: 0;
      top: 0;
    }
  }

  &__default-text {
    opacity: 0.6;
  }

  &__content {
    font-size: $font-size--md;
    width: 90%;
    margin-left: auto;
    margin-right: auto;

    p {
      margin-bottom: 0px;
    }
  }

  &__action-button {
    display: inline-block;
    background-color: $accent--under;
    min-width: $announce-button-width;
    min-height: $action-button-height;
    font-size: $font-size--md;
    font-weight: $font-weight--500;
    padding: $action-button-padding $spacing--lg;
  }

  &__close-button {
    @include square-size(20px);
    cursor: pointer;
    position: absolute;
    top: $spacing;
    right: $spacing;

    &:focus,
    &:hover {
      color: $primary--over;
      text-decoration: underline;
    }
  }

  &__container {
    top: $navbar-height;
    left: 0;
    right: 0;
    width: 100%;
    z-index: z(announcement-banner);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: absolute;

    &--centered {
      bottom: 0;
      position: fixed;
      display: flex;
      align-items: center;
      background-color: opaque-black(0.6);
    }

    &--admin {
      position: relative;
      height: 210px;
      top: 0;
    }

    &--canceled {
      position: relative;
      top: 0;
    }
  }
}