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

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

  &-label {
    font-size: 12px;
    color: $placeholder-grey;
    line-height: 16px;
    margin-bottom: 8px;
  }

  &-head {
    height: 40px;
    position: relative;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #D3D5E5;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;

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

    &-placeholder {
      color: #A3A7B9;
    }

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

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

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

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

        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
    }

    // &.is-selected {
    //   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjg2NjcgMy4yMDAwM0gxMS42NjY3VjIuNjAwMDNDMTEuNjY2NyAyLjQ0MDkgMTEuNjAzNSAyLjI4ODI5IDExLjQ5MSAyLjE3NTc3QzExLjM3ODUgMi4wNjMyNCAxMS4yMjU5IDIuMDAwMDMgMTEuMDY2NyAyLjAwMDAzQzEwLjkwNzYgMi4wMDAwMyAxMC43NTUgMi4wNjMyNCAxMC42NDI1IDIuMTc1NzdDMTAuNTMgMi4yODgyOSAxMC40NjY3IDIuNDQwOSAxMC40NjY3IDIuNjAwMDNWMy4yMDAwM0g2Ljg2Njc1VjIuNjAwMDNDNi44NjY3NSAyLjQ0MDkgNi44MDM1MyAyLjI4ODI5IDYuNjkxMDEgMi4xNzU3N0M2LjU3ODQ5IDIuMDYzMjQgNi40MjU4OCAyLjAwMDAzIDYuMjY2NzUgMi4wMDAwM0M2LjEwNzYyIDIuMDAwMDMgNS45NTUwMSAyLjA2MzI0IDUuODQyNDggMi4xNzU3N0M1LjcyOTk2IDIuMjg4MjkgNS42NjY3NSAyLjQ0MDkgNS42NjY3NSAyLjYwMDAzVjMuMjAwMDNINC40NjY3NUMzLjk4OTM2IDMuMjAwMDMgMy41MzE1MiAzLjM4OTY3IDMuMTkzOTYgMy43MjcyNEMyLjg1NjM5IDQuMDY0OCAyLjY2Njc1IDQuNTIyNjQgMi42NjY3NSA1LjAwMDAzVjEyLjJDMi42NjY3NSAxMi42Nzc0IDIuODU2MzkgMTMuMTM1MyAzLjE5Mzk2IDEzLjQ3MjhDMy41MzE1MiAxMy44MTA0IDMuOTg5MzYgMTQgNC40NjY3NSAxNEgxMi44NjY3QzEzLjM0NDEgMTQgMTMuODAyIDEzLjgxMDQgMTQuMTM5NSAxMy40NzI4QzE0LjQ3NzEgMTMuMTM1MyAxNC42NjY3IDEyLjY3NzQgMTQuNjY2NyAxMi4yVjUuMDAwMDNDMTQuNjY2NyA0LjUyMjY0IDE0LjQ3NzEgNC4wNjQ4IDE0LjEzOTUgMy43MjcyNEMxMy44MDIgMy4zODk2NyAxMy4zNDQxIDMuMjAwMDMgMTIuODY2NyAzLjIwMDAzWk0xMy40NjY3IDEyLjJDMTMuNDY2NyAxMi4zNTkyIDEzLjQwMzUgMTIuNTExOCAxMy4yOTEgMTIuNjI0M0MxMy4xNzg1IDEyLjczNjggMTMuMDI1OSAxMi44IDEyLjg2NjcgMTIuOEg0LjQ2Njc1QzQuMzA3NjIgMTIuOCA0LjE1NTAxIDEyLjczNjggNC4wNDI0OCAxMi42MjQzQzMuOTI5OTYgMTIuNTExOCAzLjg2Njc1IDEyLjM1OTIgMy44NjY3NSAxMi4yVjguMDAwMDNIMTMuNDY2N1YxMi4yWk0xMy40NjY3IDYuODAwMDNIMy44NjY3NVY1LjAwMDAzQzMuODY2NzUgNC44NDA5IDMuOTI5OTYgNC42ODgyOSA0LjA0MjQ4IDQuNTc1NzdDNC4xNTUwMSA0LjQ2MzI0IDQuMzA3NjIgNC40MDAwMyA0LjQ2Njc1IDQuNDAwMDNINS42NjY3NVY1LjAwMDAzQzUuNjY2NzUgNS4xNTkxNiA1LjcyOTk2IDUuMzExNzcgNS44NDI0OCA1LjQyNDI5QzUuOTU1MDEgNS41MzY4MiA2LjEwNzYyIDUuNjAwMDMgNi4yNjY3NSA1LjYwMDAzQzYuNDI1ODggNS42MDAwMyA2LjU3ODQ5IDUuNTM2ODIgNi42OTEwMSA1LjQyNDI5QzYuODAzNTMgNS4zMTE3NyA2Ljg2Njc1IDUuMTU5MTYgNi44NjY3NSA1LjAwMDAzVjQuNDAwMDNIMTAuNDY2N1Y1LjAwMDAzQzEwLjQ2NjcgNS4xNTkxNiAxMC41MyA1LjMxMTc3IDEwLjY0MjUgNS40MjQyOUMxMC43NTUgNS41MzY4MiAxMC45MDc2IDUuNjAwMDMgMTEuMDY2NyA1LjYwMDAzQzExLjIyNTkgNS42MDAwMyAxMS4zNzg1IDUuNTM2ODIgMTEuNDkxIDUuNDI0MjlDMTEuNjAzNSA1LjMxMTc3IDExLjY2NjcgNS4xNTkxNiAxMS42NjY3IDUuMDAwMDNWNC40MDAwM0gxMi44NjY3QzEzLjAyNTkgNC40MDAwMyAxMy4xNzg1IDQuNDYzMjQgMTMuMjkxIDQuNTc1NzdDMTMuNDAzNSA0LjY4ODI5IDEzLjQ2NjcgNC44NDA5IDEzLjQ2NjcgNS4wMDAwM1Y2LjgwMDAzWiIgZmlsbD0iIzIxQzJEMSIvPgo8L3N2Zz4K);
    //    background-repeat: no-repeat
    // }
  }

  &-default-placeholder {
    display: flex;
    align-items: center;
  }

  &-selected-value {
    display: flex;
    align-items: center;
  }

  &-icon {
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 2px;
    cursor: pointer;

    background: transparent;
    background-position: center;
    background-repeat: no-repeat;

    &.calendar {
      background-image: url('./../../assets/datetime-calendar.svg');
      background-repeat: no-repeat;
    }

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

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

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

    margin-top: 4px;
  }

  &-body {
    position: absolute;
    width: 608px;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    margin-top: 4px;
    z-index: $dropdown;
    user-select: none;

    &-inputs {
      &-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 {
      overflow: hidden;
    }
  }

  &.disabled {
    cursor: default;

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

        color: #585B69;

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

      &-icon {
        display: none;
      }
    }
  }

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

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

.default-table-header {
  padding: 0 16px;
  .ark-ui-period-calendar-input {
    cursor: default;
    &-head {
      display: grid;
      grid-auto-flow: column;
      border: none;
      border-radius: 0;
      padding: 0;
      height: 48px;

      &-placeholder {
        min-width: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #585B69;
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
      }

      &.is-selected {
        .ark-ui-period-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-period-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-period-calendar-input-head.is-opened) {
    background-color: #F0F1F7;
  }

  &:hover {
    .ark-ui-period-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
      }
    }
  }
}