@use '../../../../styles/_globals.scss' as *;

:host,
:host * {
  -webkit-tap-highlight-color: transparent;
}

:host {
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  user-select: none;
  width: 400px;
  max-width: 100%;
  display: block;

  :host-context([dir='rtl']) {
    direction: rtl;
  }

  mat-form-field {
    width: 100%;
  }

  ::ng-deep {
    .mat-calendar-header {
      padding-top: 0;
    }

    .mat-calendar-body-cell-content {
      background: transparent !important;
    }

    .mat-calendar-body-cell:focus .mat-calendar-body-cell-content {
      outline: 2px solid var(--c-accent);
    }

    .mat-calendar-body-selected {
      background: var(--c-primary) !important;
    }

    .mat-calendar-controls {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }
}

:host h4 {
  text-align: center;
  padding-top: 16px;
  font-size: 14px;
  font-weight: bold;
}

.form-ctrl-wrapper {
  margin: 16px 16px 0;
}

mat-dialog-content {
  position: relative;
  padding: 0 !important;
}

.press-enter-msg {
  text-align: center;
  font-weight: bold;
  padding: 4px 12px;
  position: absolute;
  left: 50%;
  z-index: 11;
  box-shadow: var(--whiteframe-shadow-1dp);
  border-radius: 8px;
  margin-top: -12px;
  white-space: nowrap;
  transform: translateX(-50%);

  background: var(--bg-lighter);
}

:host ::ng-deep mat-month-view .mat-calendar-body-today {
  color: transparent;

  &:after {
    @include materialIcon('wb_sunny');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color);
  }
}

.quick-access {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid var(--extra-border-color);
  height: 48px;

  > button {
    height: 48px;
    flex-grow: 1;
    border-radius: 4px !important;

    ::ng-deep .mat-mdc-button-persistent-ripple {
      border-radius: 4px !important;
    }
  }

  button + button {
    border-left: 1px solid var(--extra-border-color);
  }
}

:host ::ng-deep mat-dialog-actions {
  padding: 0 0 16px 0 !important;
}

.schedule-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 8px;
}

.schedule-actions button {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 38px;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

.mat-stroked-button {
  height: auto;
}

.schedule-actions button:not(:last-child) {
  margin-right: 2px;
}

.dialog-cancel-btn {
  display: block;
  width: 100%;
}

.schedule-actions button,
.dialog-cancel-btn {
  white-space: normal;
  word-break: break-word;
  text-align: center;
}
