.w-waitlist-widget {
  font: {
    family: $ff-base;
    size: $fs-small;
    weight: $fw-regular;
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__switch--active {
    .react-switch-bg {
      background-color: map-get($orange, 1) !important;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 16px;
    border: 1px solid map-get($grey, 10);
    border-radius: 12px;
  }

  &__telegram-icon {
    margin-left: 6px;
  }

  &__telegram-button {
    background-color: #2481cc;
    border-color: #2481cc;

    &:not([disabled]):hover {
      background-color: #1a8ad5;
      border-color: #1a8ad5;
    }
  }

  &__error {
    margin-top: 8px;
    font-size: $fs-tiny;
    color: map-get($red, 1);
  }

  &__controls {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
}
