@reference "tailwindcss";

@layer utilities {
  .tool-button {
    &:not(:disabled):active {
      color: white;
      /* Note: do not apply transform to the button itself, as it would affect its interaction target. */
      &>*:active {
        transform: translateY(1px);
      }
    }
  }
}

@layer components {
  .toolbar-control {
    color: #888888;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;

    @apply flex-none w-12 h-12 rounded-full;

    @variant hover {
      &:not(:disabled) {
        @apply text-gray-300;
      }
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    &>svg {
      fill: currentColor;
      filter: drop-shadow(rgb(0 0 0 / 0.75) 0px 1px);
      @apply w-12 h-12;
    }
  }

  .toolbar-toggle {
    /* prevent CSS minifier/Tailwind purge from removing this rule */
    --toolbar-toggle-keep: 0;
  }

  .toolbar-toggle-checked {
    color: white;

    @variant hover {
      &:not(:disabled) {
        color: white;
      }
    }
  }

  .tool-button-small {
    color: #757575;
    background-color: #2c2c30;
    /* will-change: transform; */

    @apply flex-none w-4 h-4 rounded-full;

    @variant hover {
      &:not(:disabled) {
        color: #b9b9ba;
        background-color: #303034;
      }
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    &>svg {
      fill: currentColor;
      @apply w-4 h-4;
    }
  }
}