@layer components {
  html {
    --xDirCoefficient: 1;
    scroll-behavior: smooth;
  }

  html[dir='rtl'] {
    --xDirCoefficient: -1;
  }

  /* LINKS */
  .link-underline {
    transition-duration: 1000ms;
    transition-property: background-size;
    background-image: linear-gradient(transparent calc(100% - 1px), currentcolor 1px);
    background-repeat: no-repeat;
    background-size: calc(100% - 0px) 100%;
  }

  .link-underline.has-icon {
    background-size: calc(100% - 32px) 100%;
  }

  .link-container:hover .link-underline.hoverable,
  .link-container:focus .link-underline.hoverable,
  .group:hover .link-underline.hoverable,
  .group:focus .link-underline.hoverable {
    background-size: calc(0% - 0px) 100%;
  }

  .group:hover .link-underline.hoverable,
  .group:focus .link-underline.hoverable {
    background-size: calc(0% - 0px) 100%;
  }

  [dir='rtl'] .link-underline {
    background-position: right;
  }

  /* INPUTS */

  /* Remove the reset button in active inputs */
  input[type='search']::-webkit-search-cancel-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
  }
  input[type='password']::-ms-reveal {
    display: none;
  }

  input::placeholder {
    color: var(--color-darkGrey);
  }

  select:invalid {
    color: var(--color-middleGrey);
  }

  .date-field {
    appearance: none;
    -webkit-appearance: none;
  }

  .date-field::-webkit-calendar-picker-indicator {
    display: none;
  }

  .date-field::-webkit-datetime-edit {
    width: 100%;
  }

  .date-field::-webkit-datetime-edit-fields-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
  }

  .breadcrumb-spacer:before {
    content: '...';
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0ms !important;
      transition-duration: 0ms !important;
    }
  }

  .scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
    --scrollbar-x-padding-bottom: 0;
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  [data-scroller] {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-scroller]::-webkit-scrollbar {
    display: none;
  }

  /* Custom scroll track */
  [data-scrollbar] {
    position: relative;
    width: 100%;
    height: 6px;
    padding: 1px;
    background: var(--color-ultramarine);
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
  }

  /* Custom scroll bar */
  [data-scrollbar] [data-scrollprogress] {
    content: '';
    position: absolute;
    bottom: 1px;
    inset-inline-start: 1px;
    width: var(--scrollbar-width, 60%);
    height: 4px;
    background: var(--color-saffron);
    border-radius: 4px;
    animation: scroll-position linear both;
    display: block;
    cursor: grab;
    transition: background-color 150ms ease;
  }

  [data-scrollbar] [data-scrollprogress]:hover {
    background: color-mix(in srgb, var(--color-saffron) 85%, black);
  }

  [data-scrollbar] [data-scrollprogress]:active {
    cursor: grabbing;
    background: color-mix(in srgb, var(--color-saffron) 70%, black);
  }

  [data-scroller='dark'] + [data-scrollbar] {
    background: var(--color-white);
  }

  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress] {
    background: var(--color-ultramarine);
  }

  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:hover {
    background: color-mix(in srgb, var(--color-ultramarine) 85%, white);
  }

  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:active {
    background: color-mix(in srgb, var(--color-ultramarine) 70%, white);
  }

  @keyframes scroll-position {
    from {
      inset-inline-start: 1px;
    }
    to {
      inset-inline-start: calc(100% - var(--scrollbar-width, 60%) - 1px);
    }
  }
}
