@use "../../../styles/mixins";

.statusToggleContainer {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 0px;
  margin-right: auto;

  @include mixins.respond-below(md) {
    margin-left: 16px;
  }

  .statusAction {
    margin-left: 4px;
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.9;

    @include mixins.respond-below(md) {
      display: none;
    }
  }
}

.eventPageButton {
  margin-right: 8px;
  display: flex;
  align-items: center;
  font-weight: 500;
  transition: transform 0.2s ease;
  color: #fff;

  &:hover {
    transform: translateY(-1px);
    color: #fff;
  }

  .eventPageButtonText {
    // Default: hide both
    .mobile,
    .desktop {
      display: none;
    }

    // Show mobile text from sm and up
    @include mixins.respond-above(sm) {
      .mobile {
        display: block;
      }
    }

    // Switch to desktop text at md and up
    @include mixins.respond-above(md) {
      .mobile {
        display: none;
      }

      .desktop {
        display: block;
      }
    }
  }
}

.shareButton {
  margin-left: 16px;
  display: flex;
  align-items: center;
  font-weight: 500;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-1px);
  }

  @include mixins.respond-below(md) {
    display: none;
  }
}
