.custom-calendar input, .custom-calendar input:focus {
  padding: 12px;
  background-color: transparent;
  border: 1px solid var(--input-border-color);
  color: var(--text-primary);
}

.custom-calendar input::placeholder {
  color: var(--subtext-primary);
}

.custom-calendar input:focus {
  border-color: color-mix(in srgb, transparent 50%, var(--primary-color));
  box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, transparent 80%, var(--primary-color));
}

.custom-calendar .calendar-icon {
  background-color: color-mix(in srgb, var(--text-primary) 3%, transparent);
  color: var(--text-primary);
  border: 1px solid var(--input-border-color);
}

.calendar-reference {
  position: relative;
}

.calendar-container,
.calendar-container * {
  box-sizing: border-box;
  user-select: none;
}

.calendar-container {
  --calendar-date-width: 310px;
  --calendar-datetime-width: 120px;
  --calendar-padding: 20px;

  position: absolute;
  left: 0;
  z-index: 2;

  color: var(--text-primary, black);
  background-color: var(--bg-primary, white);
  border: 1px solid #707070;
  border-radius: 8px;
  padding: var(--calendar-padding);
  font-size: 16px !important;

  display: flex;

  width: var(--calendar-date-width);
}
.calendar-container .col {
  padding: 0 !important;
}

.calendar-datetime {
  width: calc(var(--calendar-date-width) + var(--calendar-datetime-width));
  padding-right: 0 !important;
}

.calendar-date-container {
  width: calc(var(--calendar-date-width) - (var(--calendar-padding) * 2));
}

/* quando abrir embaixo */
.calendar-bottom {
  top: calc(100% + 2px);
  bottom: auto;
}

/* quando abrir em cima */
.calendar-top {
  bottom: calc(100% + 2px);
  top: auto;
}

/* header */
.calendar-header {
  margin-bottom: 12px;
}

.calendar-header button {
  border: none;
  background-color: transparent;
  color: var(--text-primary, black);
  padding: 0;
  margin: 0;
}
.calendar-header button i {
  color: var(--text-primary, black);
}
.calendar-header button:hover,
.calendar-header button:hover i {
  color: var(--primary-color, #005fc9);
}
.calendar-header button:disabled,
.calendar-header button:disabled i {
  color: color-mix(
    in srgb,
    var(--text-primary, black) 30%,
    transparent
  ) !important;
  cursor: initial !important;
  pointer-events: none !important;
}

.calendar-disabled button,
.calendar-disabled button:hover {
  color: color-mix(
    in srgb,
    var(--text-primary, black) 30%,
    transparent
  ) !important;
  cursor: initial !important;
  pointer-events: none !important;
}

.calendar-active button,
.calendar-active button:hover {
  border: 1px solid var(--primary-color, #005fc9) !important;
  color: var(--primary-color, #005fc9) !important;
}

.calendar-today button,
.calendar-today button:hover {
  border: none !important;
  background-color: var(--primary-color, #005fc9) !important;
  color: var(--text-color-with-primary, white) !important;
}
.calendar-disabled.calendar-today button,
.calendar-disabled.calendar-today button:hover {
  background-color: color-mix(
    in srgb,
    var(--primary-color, #005fc9) 30%,
    transparent
  ) !important;
}

/* body */
.calendar-body .calendar-weeks {
  font-size: 12px !important;
}
.calendar-body .calendar-weeks div {
  padding: 0;
}

.calendar-body .row {
  margin-top: 10px;
  text-align: center !important;
}

.calendar-body button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  width: 30px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--text-primary, black);
}
.calendar-body button:hover {
  color: var(--primary-color, #005fc9);
}

/* calendario datetime */
.calendar-datetime-container {
  display: none !important;
}
.calendar-datetime .calendar-datetime-container {
  display: none;
  width: calc(var(--calendar-datetime-width) + (var(--calendar-padding) * 2));
  padding-left: calc(var(--calendar-padding) * 2);
  display: flex !important;
}

.calendar-datetime-container .col {
  margin-top: 10px;
}
.calendar-datetime-container button {
  border: 1px solid var(--text-primary, black);
  border-radius: 4px;
  background-color: transparent;
  padding: 0 10px;
  margin: 0;
  margin-top: 5px;
  width: 45px;
  color: var(--text-primary, black);
}

.calendar-datetime-container button:hover,
.calendar-datetime-container button.calendar-active {
  color: var(--primary-color, #005fc9);
  border-color: var(--primary-color, #005fc9);
}

.calendar-datetime-item {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 220px;
  display: flex;
  flex-direction: column;
}

.calendar-years button {
  background-color: color-mix(in srgb, var(--text-primary, black) 12%, transparent);
  width: 60px !important;
}
.calendar-years .calendar-disabled button {
  background-color: color-mix(in srgb, var(--text-primary, black) 4%, transparent);
}

.calendar-months button {
  background-color: color-mix(in srgb, var(--text-primary, black) 12%, transparent);
  width: 95px !important;
}
.calendar-months .calendar-disabled button {
  background-color: color-mix(in srgb, var(--text-primary, black) 4%, transparent);
}
/* scrool bar invisible */
.calendar-datetime-item {
  overflow-y: auto !important;
  /* Firefox */
  scrollbar-width: none !important;
  /* IE/Edge antigo */
  -ms-overflow-style: none !important;
}
.calendar-datetime-item::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari e Edge */
}

/* footer */
.calendar-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.calendar-footer button {
  width: max-content;
  border: none;
  color: var(--primary-color, #005fc9);
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.calendar-footer button:hover {
  color: var(--text-primary, black);
}

.calendar-footer button:disabled {
  color: color-mix(
    in srgb,
    var(--text-primary, black) 30%,
    transparent
  ) !important;
  cursor: initial;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .calendar-reference {
    position: static !important;
  }

  .calendar-container {
    position: fixed !important;
    inset: 0;
    margin: auto;
    width: 95% !important;
    max-width: var(--calendar-date-width);
    min-width: 310px;
    height: max-content;
    max-height: 90vh;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
  .calendar-datetime {
    max-width: calc(
      var(--calendar-date-width) + var(--calendar-datetime-width)
    );
  }

  /* overlay */
  .calendar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1;
  }
}

@media screen and (max-width: 400px) {
  .calendar-datetime {
    display: block;
    max-width: var(--calendar-date-width);
  }
  .calendar-datetime .calendar-datetime-container {
    margin-top: 10px;
    display: block !important;
    padding-left: 0px;
    width: 100%;
  }
  .calendar-datetime-container button {
    margin-top: 10px;
    margin-right: 5px;
  }

  .calendar-datetime .calendar-datetime-item {
    display: flex !important;
    flex-direction: row !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
  }
}