@import '../../../../styles/fonts.scss';
@import '../../../../styles/variables.scss';

.ark-ui-multiple-calendar-input {
  cursor: pointer;
  position: relative;

  &-label {
    font-size: 12px;
    color: $placeholder-grey;

    margin-bottom: 8px;
  }

  &-head {
    border-radius: 4px;
    border: 1px solid #D3D5E5;

    display: flex;
    justify-content: space-between;
    padding: 11px 16px;

    font-size: 14px;
    font-weight: 400;

    &-placeholder {
      color: #A3A7B9;
    }

    &-chips-container {
      display: flex;
      gap: 4px
    }

    &-chips {
      border-radius: 4px;
      background-color: #F0F1F7;

      display: flex;
      margin: -4px 4px -4px 0;
      padding: 4px 4px 4px 8px;

      color: #585B69;
      font-size: 14px;
      font-weight: 500;

      &-clear {
        cursor: pointer;
        background: url('./../../assets/clear.svg') center center no-repeat;

        width: 16px;
        height: 16px;
        margin-left: 8px;

        &:hover {
          background-image: url('./../../assets/clear-hover.svg');
        }
      }
    }
  }

  &-icon {
    right: 16px;
    position: absolute;

    width: 16px;
    height: 16px;
    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.5C2.22386 6.5 2 6.72386 2 7C2 7.27614 2.22386 7.5 2.5 7.5H7.5C7.77614 7.5 8 7.27614 8 7C8 6.72386 7.77614 6.5 7.5 6.5H2.5Z' fill='%23A3A7B9'/%3E%3Cpath d='M2.5 8.5C2.22386 8.5 2 8.72386 2 9C2 9.27614 2.22386 9.5 2.5 9.5H4.5C4.77614 9.5 5 9.27614 5 9C5 8.72386 4.77614 8.5 4.5 8.5H2.5Z' fill='%23A3A7B9'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1H3L3 0.5C3 0.223858 3.22386 0 3.5 0C3.77614 0 4 0.223858 4 0.5V1H8V0.5C8 0.223857 8.22386 0 8.5 0C8.77614 0 9 0.223858 9 0.5V1H11C11.5523 1 12 1.44772 12 2V12C12 12.5523 11.5523 13 11 13H1C0.447715 13 0 12.5523 0 12V2C0 1.44772 0.447715 1 1 1ZM1 2V4H11V2H1ZM1 12L1 5H11V12H1Z' fill='%23A3A7B9'/%3E%3C/svg%3E%0A")
  }

  &-error {
    font-size: 12px;
    color: $error-color;

    margin-top: 4px;
  }

  &-body {
    width: 608px;
    margin-top: 20px;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);

    &-inputs {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 16px;

      input {
        width: 75px;
        border: none;
        outline: none;
        display: block;

        font-size: 14px;

        &[disabled=""] {
          background: white;
        }

        &:focus {
          border-bottom: 1px solid #21C2D1;
        }
      }

      &-arrow {
        width: 10px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-1.52991e-07 3.49997C-1.35259e-07 3.22383 0.223857 2.99997 0.5 2.99997L6.29289 2.99997L4.14641 0.853494C3.95115 0.658232 3.95115 0.341649 4.14641 0.146387C4.34168 -0.048875 4.65826 -0.0488755 4.85352 0.146387L7.85355 3.14642C7.94732 3.24018 8 3.36736 8 3.49997C8 3.63258 7.94732 3.75976 7.85355 3.85352L4.85352 6.85355C4.65826 7.04882 4.34168 7.04882 4.14642 6.85355C3.95115 6.65829 3.95115 6.34171 4.14642 6.14645L6.29289 3.99997L0.5 3.99997C0.223857 3.99997 -1.40921e-07 3.77611 -1.52991e-07 3.49997Z' fill='%23A3A7B9'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 12px;
      }

      &-clear {
        width: 16px;
        height: 16px;
        cursor: pointer;
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjA5MDkxIDQuMjQyMzlDNC44NTY2IDQuMDA4MDcgNC40NzY3IDQuMDA4MDcgNC4yNDIzOSA0LjI0MjM5QzQuMDA4MDcgNC40NzY3IDQuMDA4MDcgNC44NTY2IDQuMjQyMzkgNS4wOTA5MUw3LjM1Mzc3IDguMjAyM0w0LjI0MjM5IDExLjMxMzdDNC4wMDgwNyAxMS41NDggNC4wMDgwNyAxMS45Mjc5IDQuMjQyMzkgMTIuMTYyMkM0LjQ3NjcgMTIuMzk2NSA0Ljg1NjYgMTIuMzk2NSA1LjA5MDkxIDEyLjE2MjJMOC4yMDIzIDkuMDUwODJMMTEuMzEzNSAxMi4xNjJDMTEuNTQ3OCAxMi4zOTYzIDExLjkyNzcgMTIuMzk2MyAxMi4xNjIgMTIuMTYyQzEyLjM5NjMgMTEuOTI3NyAxMi4zOTYzIDExLjU0NzggMTIuMTYyIDExLjMxMzVMOS4wNTA4MiA4LjIwMjNMMTIuMTYyIDUuMDkxMTNDMTIuMzk2MyA0Ljg1NjgyIDEyLjM5NjMgNC40NzY5MiAxMi4xNjIgNC4yNDI2MUMxMS45Mjc3IDQuMDA4MjkgMTEuNTQ3OCA0LjAwODI5IDExLjMxMzUgNC4yNDI2MUw4LjIwMjMgNy4zNTM3N0w1LjA5MDkxIDQuMjQyMzlaIiBmaWxsPSIjMjQyQTJGIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=) center center no-repeat;
      }
    }

    &-container {
      position: relative;
      user-select: none;
      z-index: $dropdown;
    }
  }

  &-expand-calendar {
    position: absolute;
    top: 8px;
    left: 0;
    background-color: white;
    box-shadow: 0 8px 16px rgba(75, 77, 89, 0.08);
  }

  &-dropdown-wrapper {
    position: absolute;
    width: 100%;
  }

  &-dropdown {
    box-shadow: 0px 8px 16px 0px #4B4D5914;
    padding: 12px;
    margin-top: 4px;

    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  &.disabled {
    cursor: default;

    .ark-ui-multiple-calendar-input {
      &-head {
        border-color: #F6F6FA !important;
        background-color: #F6F6FA;
        color: #585B69;

        &-chips {
          background-color: #fff;
        }
      }

      &-icon {
        display: none;
      }
    }
  }

  &:hover, &:focus {
    .ark-ui-multiple-calendar-input-head {
      border-color: #A3A7B9;
    }
  }

  &.invalid {
    .ark-ui-multiple-calendar-input-head {
      border-color: $error-color
    }
  }
}

.default-table-header {
  .ark-ui-multiple-calendar-input {
    &-head {
      padding: 16px;

      border: none;
      border-radius: 0;

      &-placeholder {
        min-width: 40px;
        margin-right: 13px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: #585B69;
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
      }

      &.is-selected {
        .ark-ui-multiple-calendar-input-icon {
          background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.5C2.22386 6.5 2 6.72386 2 7C2 7.27614 2.22386 7.5 2.5 7.5H7.5C7.77614 7.5 8 7.27614 8 7C8 6.72386 7.77614 6.5 7.5 6.5H2.5Z' fill='%2330C1CF'/%3E%3Cpath d='M2.5 8.5C2.22386 8.5 2 8.72386 2 9C2 9.27614 2.22386 9.5 2.5 9.5H4.5C4.77614 9.5 5 9.27614 5 9C5 8.72386 4.77614 8.5 4.5 8.5H2.5Z' fill='%2330C1CF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1H3L3 0.5C3 0.223858 3.22386 0 3.5 0C3.77614 0 4 0.223858 4 0.5V1H8V0.5C8 0.223857 8.22386 0 8.5 0C8.77614 0 9 0.223858 9 0.5V1H11C11.5523 1 12 1.44772 12 2V12C12 12.5523 11.5523 13 11 13H1C0.447715 13 0 12.5523 0 12V2C0 1.44772 0.447715 1 1 1ZM1 2V4H11V2H1ZM1 12L1 5H11V12H1Z' fill='%2330C1CF'/%3E%3C/svg%3E%0A");
          background-repeat: no-repeat
        }
      }

      &.is-opened {
        .ark-ui-multiple-calendar-input-icon {
          background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.5C2.22386 6.5 2 6.72386 2 7C2 7.27614 2.22386 7.5 2.5 7.5H7.5C7.77614 7.5 8 7.27614 8 7C8 6.72386 7.77614 6.5 7.5 6.5H2.5Z' fill='%23585B69'/%3E%3Cpath d='M2.5 8.5C2.22386 8.5 2 8.72386 2 9C2 9.27614 2.22386 9.5 2.5 9.5H4.5C4.77614 9.5 5 9.27614 5 9C5 8.72386 4.77614 8.5 4.5 8.5H2.5Z' fill='%23585B69'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1H3L3 0.5C3 0.223858 3.22386 0 3.5 0C3.77614 0 4 0.223858 4 0.5V1H8V0.5C8 0.223857 8.22386 0 8.5 0C8.77614 0 9 0.223858 9 0.5V1H11C11.5523 1 12 1.44772 12 2V12C12 12.5523 11.5523 13 11 13H1C0.447715 13 0 12.5523 0 12V2C0 1.44772 0.447715 1 1 1ZM1 2V4H11V2H1ZM1 12L1 5H11V12H1Z' fill='%23585B69'/%3E%3C/svg%3E%0A");
          background-repeat: no-repeat
        }
      }
    }

    &-body {
      margin-top: 0;
      box-shadow: 0 8px 16px rgba(75, 77, 89, 0.08);
    }

    &-icon {
      right: 0;
    }
  }

  &:has(.ark-ui-multiple-calendar-input-head.is-opened) {
    background-color: #F0F1F7;
  }

  &:hover {
    .ark-ui-multiple-calendar-input {
      &-icon {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.5C2.22386 6.5 2 6.72386 2 7C2 7.27614 2.22386 7.5 2.5 7.5H7.5C7.77614 7.5 8 7.27614 8 7C8 6.72386 7.77614 6.5 7.5 6.5H2.5Z' fill='%23585B69'/%3E%3Cpath d='M2.5 8.5C2.22386 8.5 2 8.72386 2 9C2 9.27614 2.22386 9.5 2.5 9.5H4.5C4.77614 9.5 5 9.27614 5 9C5 8.72386 4.77614 8.5 4.5 8.5H2.5Z' fill='%23585B69'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1H3L3 0.5C3 0.223858 3.22386 0 3.5 0C3.77614 0 4 0.223858 4 0.5V1H8V0.5C8 0.223857 8.22386 0 8.5 0C8.77614 0 9 0.223858 9 0.5V1H11C11.5523 1 12 1.44772 12 2V12C12 12.5523 11.5523 13 11 13H1C0.447715 13 0 12.5523 0 12V2C0 1.44772 0.447715 1 1 1ZM1 2V4H11V2H1ZM1 12L1 5H11V12H1Z' fill='%23585B69'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat
      }
    }
  }
}