.DateStringCalendarEmbedded {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  width: calc(320px - var(--gap-l) * 2);
}

.DateStringCalendar {
  input,
  .ComboInput {
    min-width: 10%;
  }

  .ComboInput:not(:first-of-type) {
    margin-left: var(--gap-s);
  }

  .DateStringCalendarForm {
    margin-bottom: var(--gap-m);
  }

  .DateStringCalendarForm-previous,
  .DateStringCalendarForm-next {
    .IconButton;

    border: none;
    padding: 0;

    &:focus-visible {
      z-index: 1;
    }
  }

  .DateStringCalendarForm-previous {
    --IconButton-name: 'chevron_left';
  }

  .DateStringCalendarForm-next {
    --IconButton-name: 'chevron_right';
  }

  .DateStringCalendarForm-month {
    & + .ComboInput {
      &,
      .ComboInput-filter {
        width: calc(5.5em + var(--gap-s) * 2 + var(--Icon-size));
      }
    }
  }

  .DateStringCalendarForm-year {
    margin-left: var(--gap-s);
    vertical-align: middle;
    width: 4.5em;
  }

  .DateStringCalendarDate {
    margin-bottom: var(--gap-m);

    .Calendar-day {
      cursor: pointer;
      padding: var(--gap-l);
      text-align: center;
      width: calc(100% / 7);

      &.is-selected {
        background: var(--color-gray6);
        color: var(--color-white);
      }
    }
  }

  .DateStringCalendarTime {
    margin-bottom: var(--gap-m);
  }

  .DateStringCalendarTime {
    .ComboInput {
      &,
      .ComboInput-filter {
        width: calc(1.2em + var(--gap-s) * 2 + var(--Icon-size));
      }
    }

    &-select + .ComboInput {
      &,
      .ComboInput-filter {
        width: calc(
          1.2em * 3 + 1.8em + var(--gap-s) * 11 + var(--Icon-size) * 4
        );
      }
    }

    &-meridiem + .ComboInput {
      &,
      .ComboInput-filter {
        width: calc(1.8em + var(--gap-s) * 2 + var(--Icon-size));
      }
    }

    &-zoneOffset + .ComboInput,
    &-zoneId + .ComboInput {
      &,
      .ComboInput-filter {
        margin-left: 0;
        width: calc(
          1.2em * 3 + 1.8em + var(--gap-s) * 11 + var(--Icon-size) * 4
        );
      }
    }
  }

  .DateStringCalendarAction {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: var(--gap-m);
    vertical-align: bottom;

    &-set {
      .Button;
      .Button.is-dominant;
    }

    &-now {
      .Button;

      margin-right: auto;
    }

    &-clear {
      .Link;
      .Link.is-red;

      margin-right: var(--gap-s);
    }
  }

  .is-hidden {
    display: none;
  }
}

@media (@mq-l) {
  .DateStringCalendarEmbedded {
    width: calc(400px - var(--gap-l) * 2);
  }
}
