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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/


.pagy {
    @apply flex space-x-1 font-semibold text-sm text-butter justify-center;

    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-magenta hover:bg-gray-300;

        &:not([href]) { /* disabled links */
            @apply text-gray-300 bg-plum cursor-default;
        }

        &.current {
            @apply bg-gray-400;
        }
    }

    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@font-face {
    font-family: 'BigShoulder';
    src: url(/assets/BigShouldersDisplay-VariableFont_wght-563db58f64cb06b8396af0438be0cb44c3c69c8e396c0ce534e56836772a61c7.ttf);
}

.corner-clip {
    /*clip-path: xywh(0 5px 100% 75% round 15% 0);*/
    /*clip-path: xywh(0 0px 100% 100% round 27% 0%);*/
    /*clip-path: path(M 0 0 C 0 0, 0, 80%, 20%, 100% L 100%, 80% L 100% 0 Z);*/
    /*clip-path: polygon(0% 0%, 0% 20%, 0% 100%, 79% 100%, 100% 79%, 100% 1%);*/
    /*clip-path: inset(0% 0% 0% 25% round 10px);*/
    /*<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 600 600"><path d="M3.5340340624321698 8.737855523577309e-7C7.853405842191876 -74.73821806949246 -52.094239345186054 4.712042728643951 24.73822288613212 5.497383037787017C101.5706851174503 6.282723346930084 370.1570836395094 -23.167538722772065 464.5288074503411 4.712042728643951C558.9005312611728 32.591624180059966 569.1099333455234 74.73822124757504 590.9685657511224 172.7748717462831C612.8271981567214 270.8115222449912 670.5497069050937 523.1675465102803 595.6806018839349 592.9319457208924C520.811496862776 662.6963449315044 241.2303705702294 614.5288085138611 141.75393562416923 591.3612670099549C42.27750067810905 568.1937255060486 21.858642467863262 552.4869077201497 -1.1780077924262287 453.92669669745493C-24.21465805271572 355.3664856747601 -0.7853377173275504 74.73821981706357 3.5340340624321698 8.737855523577309e-7C7.853405842191876 -74.73821806949246 -52.094239345186054 4.712042728643951 24.73822288613212 5.497383037787017 " fill="hsl(340, 45%, 50%)" transform="matrix(0.992518734375,-1.2240208846492351e-16,1.2240208846492351e-16,0.992518734375,-6.781293065860382,3.6274028097817563)"></path></svg>*/

}

.smooth-scroll {
    scroll-behavior: smooth;
}

.tnum {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}