:root {
  --dock-item-hover-color: rgba(var(--config-accent-light-color-rgb), 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dock-item-hover-color: rgba(var(--config-accent-color-rgb), 0.2);
  }
}

@keyframes shadow-on-horizontal-scroll {
  from {
    box-shadow: inset -20px 0 15px -10px rgb(0 0 0 / 0.5);
  }
  to {
    box-shadow: inset 20px 0 15px -10px rgb(0 0 0 / 0.5);
  }
}

@keyframes shadow-on-vertical-scroll {
  from {
    box-shadow: inset 0 -20px 15px -10px rgb(0 0 0 / 0.5);
  }
  to {
    box-shadow: inset 0 20px 15px -10px rgb(0 0 0 / 0.5);
  }
}

.taskbar {
  > .bg-layers {
    > .bg-layer-2 {
      opacity: 0.8;
      background-color: var(--color-gray-100);
      border-radius: 15px;
    }
  }

  > .weg-items-container {
    border-radius: 15px;
  }

  &.horizontal {
    > .weg-items-container {
      animation: shadow-on-horizontal-scroll linear;
      animation-timeline: scroll(x self);
    }
  }

  &.vertical {
    > .weg-items-container {
      animation: shadow-on-vertical-scroll linear;
      animation-timeline: scroll(y self);
    }
  }

  &.temporal-only {
    --empty-rule: "delete me on use";
  }
}

.weg-separator {
  .horizontal & {
    &.weg-separator-1 {
      border-left: 1px solid var(--color-gray-500);
    }
    &.weg-separator-2 {
      border-right: 1px solid var(--color-gray-500);
    }
  }

  .vertical & {
    &.weg-separator-1 {
      border-top: 1px solid var(--color-gray-500);
    }
    &.weg-separator-2 {
      border-bottom: 1px solid var(--color-gray-500);
    }
  }
}

.weg-empty-state-label {
  white-space: nowrap;
  width: min-content;
  line-height: var(--config-item-size);
  vertical-align: middle;
  font-style: italic;
  color: var(--color-gray-400);
  margin: 0 calc(var(--config-padding) * 2);
}

:root {
  --padding-ratio: 0.15; /* this count as x2 like there is a padding on each side */
  --inner-spacing: calc(var(--config-item-size) * var(--padding-ratio));
  /* this represent the max item size as 3 items to follow simetry */
  --max-item-size: calc(var(--config-item-size) * 3 + var(--config-space-between-items) * 2);
  /* same as use 25% but this works for rectangles */
  --border-radius: calc(var(--config-item-size) * 0.25);
}

.weg-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--inner-spacing);
  padding: var(--inner-spacing);
  min-width: var(--config-item-size);
  max-width: var(--max-item-size);
  height: var(--config-item-size);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);

  > .bg-layers {
    > .bg-layer-1 {
      background-color: var(--color-gray-100);
      border-radius: var(--border-radius);
    }

    > .bg-layer-2 {
      border-radius: var(--border-radius);
      transition: background-color 0.2s ease-out;
    }
  }

  &.media-session-container {
    padding: 0;

    &.media-session-container-horizontal {
      width: var(--max-item-size);
    }

    &.media-session-container-vertical {
      height: var(--max-item-size);
    }

    .media-session {
      border-radius: var(--border-radius);
      overflow: hidden;
    }
  }

  &:hover > .bg-layers > .bg-layer-2 {
    background-color: var(--dock-item-hover-color);
  }

  &:active {
    > .bg-layers > .bg-layer-1 {
      filter: brightness(0.8);
    }

    .weg-item-icon {
      transform: scale(0.8);
    }
  }

  &:not(:active) {
    > .bg-layers > .bg-layer-1 {
      transition: filter 0.2s linear;
    }

    .weg-item-icon {
      transition: transform 0.2s linear;
    }
  }

  .weg-item-icon {
    height: 100%;
    width: unset;
    aspect-ratio: 1/1;
    filter: drop-shadow(0px 0px 1px #0000009a);
    object-fit: contain;

    /* &[data-shape="square"] {} (this attribute exists but is not used on default theme) */

    &.weg-item-start-icon,
    &.weg-item-folder-icon {
      filter: none;
    }
  }

  .weg-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: max(calc(var(--config-item-size) / 3), 12px);
    font-weight: 600;

    .vertical & {
      display: none;
    }
  }

  .weg-item-notification-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background-color: var(--config-accent-color);
    color: #efefef;
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
  }

  .weg-item-instance-counter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
    background-color: var(--color-gray-400);
    color: var(--color-gray-100);
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
  }

  .weg-item-open-sign {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 6px;
    background-color: var(--color-gray-600);
    opacity: 0;
    transition-property: width, height, transform, opacity, background-color, border-radius;
    transition-duration: 0.2s;
    transition-timing-function: linear;

    .vertical & {
      transform: translateX(-50%);
    }

    .horizontal & {
      transform: translateY(-50%);
    }

    .top & {
      bottom: calc(100% + var(--config-padding) / 2);
    }

    .bottom & {
      top: calc(100% + var(--config-padding) / 2);
    }

    .left & {
      right: calc(100% + var(--config-padding) / 2);
    }

    .right & {
      left: calc(100% + var(--config-padding) / 2);
    }

    &.weg-item-open-sign-active {
      opacity: 1;
    }

    &.weg-item-open-sign-focused {
      background-color: var(--config-accent-color);

      .vertical & {
        height: 50%;
      }

      .horizontal & {
        width: 50%;
      }
    }
  }
}

.weg-context-menu-container {
  padding: 3px;

  > .bg-layers {
    > .bg-layer-1 {
      background-color: var(--color-gray-100);
      border-radius: 10px;
    }
  }

  .weg-context-menu {
    --empty-rule: "delete me on use";
  }

  .weg-context-menu-item-icon {
    width: 1em;
  }
}

.weg-item-preview-container {
  margin: calc(var(--config-padding) * 2);
  padding: 10px;
  border-radius: 10px;

  > .bg-layers {
    > .bg-layer-1 {
      background-color: var(--color-gray-100);
      border-radius: 10px;
    }
  }

  .weg-item-display-name {
    white-space: nowrap;
  }

  .weg-item-preview-scrollbar {
    &:has(.weg-item-preview-thumbnail-disabled) {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
  }
}

.weg-item-preview {
  padding: 6px 10px 10px 10px;
  border-radius: 10px;
}

.weg-item-preview-topbar {
  margin: 0 0 8px 0;

  .weg-item-preview-thumbnail-disabled & {
    margin: 0;
  }
}

.weg-item-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.weg-item-preview-close {
  --empty-rule: "delete me on use";
}

.weg-item-preview-image-container {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
}

.weg-item-preview-image {
  --empty-rule: "delete me on use";
}

.weg-item-preview-spin {
  --empty-rule: "delete me on use";
}
