// custom theming for owl-date-time
// stylelint-disable

.cdk-global-scrollblock
{
  position: initial;
  width: initial;
  overflow: hidden;
}

.owl-dt-container,
.owl-dt-container *
{
  box-sizing: border-box;
}

.owl-dt-container
{
  z-index: 1000;
  display: block;
  background: $coconut;
  font-size: 1.2rem;
  pointer-events: auto;
}

.owl-dt-container-row
{
  border-bottom: 1px solid $border-color-primary;

  &:last-child
  {
    border-bottom: none;
  }
}

.owl-dt-calendar
{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.owl-dt-calendar-control
{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5em;
  color: $font-color-primary;
  font-size: 1em;

  .owl-dt-calendar-control-content
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;

    .owl-dt-calendar-control-button
    {
      padding: 0 0.8em;

      &:hover
      {
        background-color: $ice;
      }
    }
  }
}

.owl-dt-calendar-main
{
  display: flex;
  flex-direction: column;
  outline: 0;
  padding: 0 0.5em 0.5em;
  flex: 1 1 auto;
}

.owl-dt-calendar-view
{
  display: block;
  flex: 1 1 auto;
}

.owl-dt-calendar-multi-year-view
{
  display: flex;
  align-items: center;

  .owl-dt-calendar-table
  {
    width: calc(100% - 3em);

    .owl-dt-calendar-header th
    {
      padding-bottom: 0.25em;
      font-weight: $font-weight-regular;
    }
  }
}

.owl-dt-calendar-table
{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .owl-dt-calendar-header
  {
    color: $font-color-primary;
    text-align: center;

    .owl-dt-weekdays
    {
      th
      {
        padding-bottom: 1em;
        font-weight: 400;
        font-size: $font-size-sm;
        text-align: center;
      }
    }

    .owl-dt-calendar-table-divider
    {
      position: relative;
      height: 1px;
      padding-bottom: 0.5em;

      &::after
      {
        position: absolute;
        top: 0;
        right: -0.5em;
        left: -0.5em;
        height: 1px;
        background: $border-color-primary;
        content: "";
      }
    }
  }

  .owl-dt-calendar-cell
  {
    position: relative;
    height: 0;
    outline: 0;
    color: $font-color-primary;
    line-height: 0;
    text-align: center;
    cursor: pointer;
  }

  .owl-dt-calendar-cell-content
  {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 1px solid transparent;
    color: $font-color-primary;
    font-weight: $font-weight-semi-bold;
    font-size: 0.8em;
    line-height: 1;
  }

  .owl-dt-calendar-cell-out
  {
    opacity: 1;
    color: $font-color-primary;
    font-weight: $font-weight-regular;
  }

  .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected)
  {
    border-color: $border-color-primary;
  }

  .owl-dt-calendar-cell-selected
  {
    background-color: $accent-color-primary;
    color: $coconut;
    font-weight: $font-weight-semi-bold;

    &.owl-dt-calendar-cell-today
    {
      box-shadow: none;
    }
  }

  .owl-dt-calendar-cell-disabled
  {
    & > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected)
    {
      color: $font-color-secondary;
      cursor: not-allowed;
    }

    & > .owl-dt-calendar-cell-content.owl-dt-calendar-cell-selected
    {
      opacity: 1;
      cursor: not-allowed;
    }

    & > .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected)
    {
      border-color: $border-color-primary;
      cursor: not-allowed;
    }
  }

  .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
  :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected)
  {
    background-color: $ice;
    color: $font-color-primary;
    font-weight: $font-weight-semi-bold;
  }

  .owl-dt-calendar-cell-in-range
  {
    background: rgba($accent-color-primary, 0.2);
    font-weight: $font-weight-semi-bold;

    &.owl-dt-calendar-cell-range-from
    {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.owl-dt-calendar-cell-range-to
    {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

.owl-dt-timer
{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 7em;
  outline: none;
  padding: 0.5em;
}

.owl-dt-timer-box
{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  height: 100%;
}

.owl-dt-timer-content
{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0.2em 0;

  .owl-dt-timer-input
  {
    display: block;
    width: 2em;
    outline: medium none;
    border-radius: 0;
    border: 1px solid $border-color-primary;
    padding: 0.2em;
    font-size: 1.2em;
    text-align: center;
  }
}

.owl-dt-timer-divider
{
  position: absolute;
  left: -0.3em;
  display: inline-block;
  align-self: flex-end;
  width: 0.6em;
  height: 100%;

  &::before,
  &::after
  {
    position: absolute;
    left: 50%;
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-radius: 100%;
    background-color: $font-color-primary;
    content: "";
    transform: translateX(-50%);
  }

  &::before
  {
    top: 35%;
  }

  &::after
  {
    bottom: 35%;
  }
}

.owl-dt-control:focus > .owl-dt-control-content
{
  background-color: transparent;
}

.owl-dt-control-button
{
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  outline: none;
  border: none;
  padding: 0;
  background-color: transparent;
  color: $font-color-primary;
  font-size: 1em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  .owl-dt-control-button-content
  {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    outline: none;
  }

  &:focus > .owl-dt-control-button-content
  {
    background-color: $coconut;
  }

  &:not(:-moz-focusring):focus > .owl-dt-control-button-content
  {
    box-shadow: none;
  }

  &:hover > .owl-dt-control-button-content
  {
    background-color: $ice;
  }
}

.owl-dt-control-period-button
{
  .owl-dt-control-button-content
  {
    height: 1.5em;
    border-radius: 0;
    padding: 0 0.5em;
    transition: background-color 100ms linear;
  }

  &:hover > .owl-dt-control-button-content
  {
    background-color: $ice;
  }

  .owl-dt-control-button-arrow
  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    margin: 0.1em;
    transition: transform 200ms ease;
  }
}

.owl-dt-control-arrow-button
{
  .owl-dt-control-button-content
  {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0;
    padding: 0;
  }

  &[disabled]
  {
    color: $font-color-secondary;
    cursor: default;
  }

  svg
  {
    width: 50%;
    height: 50%;
    fill: currentColor;
  }
}

.owl-dt-inline-container,
.owl-dt-popup-container
{
  position: relative;
  width: 18.5em;
  box-shadow: $box-shadow-primary;

  .owl-dt-calendar,
  .owl-dt-timer
  {
    width: 100%;
  }

  .owl-dt-calendar
  {
    height: 20.25em;
  }
}

.owl-dt-inline-container
{
  display: inline-block;
}

.owl-dt-dialog-container
{
  max-height: 95vh;
  margin: -1.5em;

  .owl-dt-calendar
  {
    min-width: 250px;
    min-height: 330px;
    max-width: 750px;
    max-height: 750px;
  }

  .owl-dt-timer
  {
    min-width: 250px;
    max-width: 750px;
  }
}

@media all and (orientation: landscape)
{
  .owl-dt-dialog-container
  {
    .owl-dt-calendar
    {
      width: 58vh;
      height: 62vh;
    }

    .owl-dt-timer
    {
      width: 58vh;
    }
  }
}

@media all and (orientation: portrait)
{
  .owl-dt-dialog-container
  {
    .owl-dt-calendar
    {
      width: 80vw;
      height: 80vw;
    }

    .owl-dt-timer
    {
      width: 80vw;
    }
  }
}

.owl-dt-container-buttons
{
  display: flex;
  width: 100%;
  height: 2em;
  color: $font-color-primary;
}

.owl-dt-container-control-button
{
  width: 50%;
  height: 100%;
  border-radius: 0;
  font-size: 1em;

  .owl-dt-control-button-content
  {
    width: 100%;
    height: 100%;
    transition: background-color 100ms linear;
  }

  &:hover
  {
    .owl-dt-control-button-content
    {
      background-color: $ice;
    }
  }
}

.owl-dt-container-info
{
  padding: 0 0.5em;
  cursor: pointer;

  .owl-dt-container-range
  {
    &:last-child
    {
      border-top: 1px solid $border-color-secondary;
    }
  }

  .owl-dt-container-info-active
  {
    color: $font-color-primary;
  }
}

.owl-dt-container-disabled,
.owl-dt-trigger-disabled
{
  opacity: 1;
  border: 1px solid rgba($border-color-primary, 0.5);
  background: $mist;
  color: $font-color-secondary;
  cursor: not-allowed;

  &:hover
  {
    border: 1px solid rgba($border-color-primary, 0.5);
    background: $mist;
    color: $font-color-secondary;
    cursor: not-allowed;
  }
}

.owl-dt-timer-hour12
{
  display: flex;
  justify-content: center;
  align-items: center;
  color: $accent-color-primary;

  .owl-dt-timer-hour12-box
  {
    border-radius: 0;
    border: 1px solid $accent-color-primary;
    color: $accent-color-primary;
    font-weight: $font-weight-regular;
    transition: background 200ms ease;

    .owl-dt-control-button-content
    {
      width: 100%;
      height: 100%;
      padding: 0.5em;
    }

    &:focus,
    &:hover
    {
      .owl-dt-control-button-content
      {
        border-color: transparent;
        background: $accent-color-primary-hover;
        color: $coconut;
      }
    }
  }
}

.owl-hidden-accessible
{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
}