h1 mat-icon {
  transform: rotate(45deg);
}

h1,
mat-dialog-actions {
  :host-context([dir='rtl']) & {
    direction: rtl;
  }
}

.show-on-small {
  display: none;
}

@media (max-width: 600px) {
  mat-dialog-actions {
    flex-wrap: nowrap;
  }

  .hide-on-small {
    display: none;
  }

  .show-on-small {
    display: inline;
  }

  :host ::ng-deep .icon-on-small {
    min-width: 0 !important;
    padding: 0 var(--s2) !important;

    .mat-icon {
      margin: 0 !important;
    }
  }
}

.form-wrapper {
  min-width: 280px;
  max-width: 620px;
}

:host collapsible {
  margin-top: var(--s2);
  margin-bottom: var(--s2);
}

:host ::ng-deep .collapsible-title {
  flex-grow: 0 !important;
  font-weight: bold;
  font-size: 17px;
}

:host::ng-deep .repeat-config-container {
  display: block;
  border-radius: var(--card-border-radius);
  margin-left: var(--s2);
  margin-bottom: var(--s5);
}

:host::ng-deep .weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s);

  > * {
    width: auto;
    max-width: 48%;
    min-width: 0;
  }
}

// Visibility toggle for the weekday group, which must stay mounted (#8025):
// hiding via CSS keeps formly from destroying/recreating the child views, which
// would otherwise break the checkbox/FormControl wiring after a cycle round-trip.
:host::ng-deep .repeat-cfg-hidden {
  display: none;
}

// Inline error shown when a CUSTOM weekly config has no weekday selected (#8025).
.weekday-error {
  color: var(--c-warn);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--s2);
  margin-inline-start: var(--s2);
}
:host::ng-deep .repeat-cycle {
  display: flex;

  > * {
    width: 100%;
    min-width: 0;
    margin-left: var(--s2);

    &:first-child {
      margin-left: 0;
      width: auto;
    }
  }
}

.planned-start-date-field-wrapper {
  margin-bottom: var(--s2);
  width: 100%;
}

.planned-start-date-btn {
  width: 100%;
  text-align: start !important;
  justify-content: start !important;
  height: 48px !important;
  padding: 0 var(--s2) !important;
}

.planned-start-date-btn-content {
  display: flex;
  align-items: center;
  gap: var(--s);
  width: 100%;
  text-align: start;
}

.planned-date-label {
  font-weight: bold;
}

.planned-date-val {
  flex-grow: 1;
}

.reminder-badge {
  color: var(--color-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
