@use 'tailwind';

@layer components {
  .btn-example {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .dev-body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background-color: rgb(225, 225, 225);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
  }

  .s3d {
    --shadow-color: rgba(5, 5, 5, 0.25);
    --lt-shadow-color: rgba(5, 5, 5, 0.1);
    --highlight-color: rgba(255, 255, 255, 0.25);
    --btn-raw-color: 230, 230, 230;
    --light-angle: 135deg;
    --radius: 999vw;
    // --radius: 5em;


    border-radius: var(--radius);

    // all: unset;
    position: relative;
    padding: 1em 1.5em;
    background-color: rgba(0, 0, 0, 0.75); // tiny gap
    box-shadow:
      -0.15em -0.15em 0.15em -0.075em var(--shadow-color),  // tl
      0.15em -0.15em 0.15em -0.075em var(--shadow-color),   // tr
      -0.15em 0.15em 0.15em -0.075em var(--shadow-color),   // bl
      0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);  // br // why different ? (improves perspective shadow feel?)

    &::before, &::after {
      content: "";
      border-radius: var(--radius);
      position: absolute;
      // border-radius: inherit;
      transition: all 250ms ease;
    }

    &::before {
      z-index: 1;
      inset: 0.025em;
      box-shadow: 0.15em 0.3em 0.1em -0.01em var(--shadow-color);
    }

    &::after {
      z-index: 2;
      inset: 0.0125em;
      // main button color
      // TODO var it & use darken etc
      background-image: linear-gradient(
        var(--light-angle),
        rgb(var(--btn-raw-color)),
        rgba(var(--btn-raw-color), 0.7),
      );
      clip-path: inset(0 round var(--radius));
      // inline shadows
      box-shadow:
        // inline-perspective shadow
        0 0 0 0 inset var(--shadow-color),
        // Rounding of the button itself
        -0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
        0 0 0.05em 0.2em inset var(--highlight-color), // button top
        -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
    }

    span {
      --text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));

      position: relative;
      z-index: 3;
      font-family: inherit;
      letter-spacing: -0.05em;
      font-weight: 500;
      color: transparent;
      background-image: var(--text-gradient);
      background-clip: text;
      transition: transform 250ms ease;
      display: block;
      text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
    }

    // &:hover span {
    //   transform: scale(0.975);
    // }

    // &:active span {
    //   transform: scale(0.95);
    // }
  }
}