@import './partials/vars.pcss';
@import './partials/hack.pcss';

@import './partials/mixins.pcss';

@import '@modules/nouislider/distribute/nouislider.min.css';
@import './vendor/nprogress.pcss';

@import './partials/skeleton.pcss';
@import './partials/tooltip.pcss';
@import './partials/context-menu.pcss';
@import './partials/shared.pcss';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .fade-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--fade-size));
    mask-image: linear-gradient(to bottom, transparent, black var(--fade-size));
  }

  .fade-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent, black var(--fade-size));
    mask-image: linear-gradient(to top, transparent, black var(--fade-size));
  }

  .fade-top.fade-bottom {
    -webkit-mask:
      linear-gradient(to bottom, transparent, black var(--fade-size)) top,
      linear-gradient(to top, transparent, black var(--fade-size)) bottom;
    -webkit-mask-size: 100% 51%;
    -webkit-mask-repeat: no-repeat;

    mask:
      linear-gradient(to bottom, transparent, black var(--fade-size)) top,
      linear-gradient(to top, transparent, black var(--fade-size)) bottom;
    mask-size: 100% 51%;
    mask-repeat: no-repeat;
  }

  .playable-list-item {
    @apply border-b border-k-fg-10 !max-w-full h-[64px] flex
    items-center transition-[background-color_box-shadow] ease-in-out duration-200
    focus:rounded-md focus-within:rounded-md focus:ring-inset focus:ring-1 focus:!ring-k-highlight
    focus-within:ring-inset focus-within:ring-1 focus-within:!ring-k-highlight
    hover:bg-k-fg-5 hover:ring-inset hover:ring-1 hover:ring-k-fg-10 hover:rounded-md;

    &.selected {
      @apply bg-k-fg-10;
    }
  }
}