.mobile-view {
  .discourse-post-event-builder-modal {
    .modal-inner-container {
      .modal-body {
        .d-date-time-input-range {
          flex-direction: column;
          width: 100%;
          border: 0;

          .d-date-time-input {
            .d-date-input {
              width: 100%;
            }

            .name {
              font-size: $font-down-1;
            }

            &.from {
              margin-right: 2.65em;
            }

            &.to {
              margin-top: 0.5em;

              .d-time-input {
                order: 1;
              }

              .clear-date-time {
                order: 2;
              }
            }
          }
        }
      }
    }
  }
}

.discourse-post-event-builder-modal {
  .modal-inner-container {
    width: 550px;
  }

  .modal-body {
    min-height: 200px;

    .d-date-time-input-range {
      .d-time-input {
        .selected-name {
          border: 0;

          .name {
            font-size: $font-down-1;
          }
        }
      }

      .to.d-date-time-input {
        .pika-single.is-bound {
          left: -2px !important;
        }
      }
    }
  }

  .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .event-field {
    display: flex;
    margin: 1em 0;
    flex-direction: column;

    &.name,
    &.url {
      input {
        width: 100%;
      }
    }

    .event-field-description {
      margin: 0 0 0.5em 0;
    }

    .event-field-label {
      display: flex;
      min-height: 1px;
      padding-top: 0;
      top: 0;
      vertical-align: middle;
      align-items: center;

      .label {
        font-weight: 700;
        margin-bottom: 0.5em;
      }
    }

    .event-field-control {
      display: flex;
      flex: 1;
      flex-direction: column;

      .custom-field-label {
        font-weight: 500;
        margin: 0.5em 0 0.25em 0;
      }

      .custom-field-input {
        width: 100%;
      }

      .radio-label {
        display: flex;
        align-items: center;
        margin-bottom: 1em;

        &:last-child {
          margin-bottom: 0;
        }

        input[type="radio"] {
          width: auto;
          margin-right: 0.5em;
        }

        .message {
          margin: 0 0 0 1em;
          padding: 0;
          display: flex;
          flex-direction: column;

          .description {
            color: var(--primary-medium, $primary-medium);
          }
        }
      }

      .ac-wrap {
        max-width: 100%;
      }

      input {
        margin: 0;
      }
    }
  }

  .event-field.reminders {
    display: flex;

    .reminders-list {
      display: flex;
      flex-direction: column;
      margin-bottom: 1em;

      .reminder-item {
        display: flex;
        flex: 1 0 auto;
        padding: 0.25em 0;

        .reminder-value {
          width: 60px;
          margin-right: 0.5em;
        }

        .reminder-unit {
          width: 140;
          margin-right: 0.5em;
        }

        .reminder-period {
          width: 100%;
          margin-right: 0.5em;
        }

        .remove-reminder {
          margin-left: auto;
        }
      }
    }

    .add-reminder {
      align-self: flex-start;
    }
  }
}