@use '@angular/material' as mat;
@import '@firestitch/style/styles';
@import './variables';


.fs-date-picker-calendar {
  .highlight {
    &:not(.highlight-from):not(.highlight-to) {
      background-color: color-rgb($selected-color, $selected-color-opacity);
    }

    &.highlight-from {
      background: linear-gradient(
        90deg,
        #fff 0%,
        #fff 49%,
        color-rgb($selected-color, $selected-color-opacity) 51%);
    }

    &.highlight-to {
      background: linear-gradient(
          -90deg,
          #fff 0%,
          #fff 49%,
          color-rgb($selected-color, $selected-color-opacity) 51%);
    }
  }

  .period-mode {
    cursor: default;
    pointer-events: none;

    background: none;
  }

  .period {
    width: 48px;
    padding: 14px 0;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    background: #e4e4e4;
    color: #858585;
    cursor: pointer;

    &:hover {
      background: #effaff;
    }
  }

  .month-range {
    &:not(.range-selected) {
      .tile-content.range-from {
        background-color: #fff;
        color: #000;
        font-weight: normal;
        position: relative;
        justify-content: center;
        align-items: center;
        border: 8px solid transparent;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          border: 8px solid transparent;
          border-radius: 100%;
          border-left-color: color-rgb($selected-color);
          border-bottom-color: color-rgb($selected-color);
          transform: rotateZ(45deg);
          box-sizing: content-box;
        }
      }
    }
  }

  .week {
    &.hover {
      td {
        &:not(.selected) {
          &.period {
            background: color-rgb($palette, 0.1);
          }

          &.day {
            background: color-rgb($palette, 0.3) !important;
          }
        }
      }
    }
  }
}

.fs-date-picker-dialog-shadow {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.fs-date-picker-dialog {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--mdc-dialog-container-shape, var(--mat-app-corner-extra-large, 4px));
}

.fs-date-picker-container {
  &.date-mode-year, &.date-mode-month {
    .calendar-view {
      height: 350px;
    }
  }

  * {
    user-select: none;
  }

  &:focus {
    outline: none;
  }
  &:active {
    outline: none;
  }

  .calendar-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 !important;
    overflow: hidden;

    &:focus {
      outline: none;
    }
    &:active {
      outline: none;
    }
  }

  .calendar-container::-webkit-scrollbar {
    display: none;
  }

  .inline-date {
    padding: 10px;
    width: 100%;
  }

  .tile {
    padding: 0;
  }

  .tile-content {
    outline: none;
    display: flex;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    border-radius: 50%;
    flex-direction: column;
    clip-path: circle(46%);
    box-sizing: border-box;

    &.enabled {
      background: color-rgb($enabled-color, $enabled-color-opacity);
      font-weight: bold;
      color: color-rgb($enabled-color);
    }

    &.surrounding {
      color: #b2b2b2;
    }

    &.disabled {
      background: #f9f9f9;
      color: #ccc;
      cursor: initial;
      pointer-events: none;
    }

    &.selected,
    &.range-from,
    &.range-to {
      background-color: mat.m2-get-color-from-palette($selected-color);
      font-weight: bold;
      color: #fff;
    }

    &:hover:not(.disabled):not(.selected):not(.range-from):not(.range-to) {
      background: color-rgb($hover-color, $hover-color-opacity);
    }

    &.now:not(:hover)::after {
      content: '•';
      font-size: 140%;
      line-height: 0;
      margin-top: 0;
      top: 2px;
      position: relative;
      color: color-rgb($now-color, 1);
    }
  }

  .calendar-container {
    width: 100%;
    position: relative;
    flex: 1 1 45%;
    overflow: hidden;
  }

  .clear {
    clear: both;
  }

  .close {
    padding: 5px;
    display: none;
  }

  fs-tabnav {
    display: none;
    .md-tabs a {
      width: 50%;
    }
  }

  table {
    border-spacing: 0;
    margin: auto;
    border: 0;

    td, th {
      border-width: 0;
      border-color: transparent;
    }
  }
}


.fs-date-picker-dialog {
  .has-view-time {
    .summary .date.active,
    .summary .time.active {
      color: mat.m2-get-color-from-palette($palette);
    }
  }
}

.time-container .minutes .button-expand {
  color: mat.m2-get-color-from-palette($palette);
}

.mat-form-field.fs-date-picker-datetime-range-field {
  min-width: 355px;
}

.mat-form-field.fs-date-picker-date-range-field {
  min-width: 220px;
}

.mat-form-field .mat-form-field-flex.hide-clear .fs-clear-wrapper {
  display: none;
}

fs-date-picker-dialog * {
  touch-action: manipulation;
}

// SC-T246 hack should fix issues on old android devices
.fs-date-picker-prevent-pull-to-refresh {
  overscroll-behavior: none;
}