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

@layer utilities {
  .remove-focus-styles {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    ring: 0 !important;
    --tw-ring-offset-width: 0 !important;
    --tw-ring-offset-color: transparent !important;
    --tw-ring-color: transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
    --tw-ring-shadow: 0 0 transparent !important;
  }

  .grid-layout {
    @apply mx-auto grid w-full max-w-full grid-cols-4 gap-3 px-4 lg:grid-cols-12;
  }

  .corner-borders {
    --b: 1px;
    --c: #e6e6e6;
    --w: 8px;

    border: var(--b) solid transparent;
    --_g: transparent 90deg, var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;
    background:
      conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /
        var(--_p),
      conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100%
        0 / var(--_p),
      conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0
        100% / var(--_p),
      conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))
        100% 100% / var(--_p);
  }

  .actionable {
    --anim-duration: 300ms;
    --anim-delay: calc(var(--anim-duration) / 5);
    --opacity-hover-value: 100;
    --opacity-hover-anim-target: 50;

    --text-shadow-color: color-mix(
      in srgb,
      currentColor calc(var(--opacity-hover-value) * 1% * 0.5),
      transparent
    );
    --color-mix: color-mix(
      in srgb,
      currentColor calc(var(--opacity-hover-value) * 1%),
      transparent
    );

    /* using this var in the height calculation causes a layout shift in safari */
    --height: 0.89;

    color: var(--color-mix) !important;
    display: inline-flex;
    align-items: center;
    height: calc(0.89 * 1em);
    line-height: 0.89;

    &:not(.actionable-no-underline) {
      --underline-height: max(0.06em, 1px);
      @apply font-semibold;
      @apply before:absolute before:-bottom-[round(var(--underline-height),1px)] before:left-0 before:h-[round(var(--underline-height),1px)] before:w-full before:bg-[var(--color-mix)] before:[--opacity-hover-value:100];
      @apply before:transition-opacity before:duration-[var(--anim-delay)] before:ease-linear;
      @apply before:opacity-0 hover:before:opacity-100;
    }

    &:not(.actionable-inanimate) {
      @apply relative transition-none !duration-[var(--anim-delay)] ease-linear hover:transition-colors;
      @apply focus:animate-actionable-blink focus:[--opacity-hover-value:var(--opacity-hover-anim-target)];
      @apply hover:animate-actionable-blink hover:[--opacity-hover-value:var(--opacity-hover-anim-target)] hover:[text-shadow:0px_0px_30px_var(--text-shadow-color)];
    }

    @apply relative;
    @apply active:animate-none;
  }

  .custom-underline {
    --underline-height: max(0.06em, 1px);
    @apply relative inline-block font-semibold;
    @apply before:absolute before:-bottom-[round(var(--underline-height),1px)] before:left-0 before:h-[round(var(--underline-height),1px)] before:w-full before:bg-[var(--color-mix)] before:[--opacity-hover-value:100];
    @apply before:transition-opacity before:duration-[var(--anim-delay)] before:ease-linear;
  }

  a[target="_blank"],
  a[target="_blank"] *,
  a[href^="mailto:"],
  a[href^="mailto:"] * {
    @apply cursor-alias;
  }

  .actionable-opacity {
    --anim-duration: 300ms;
    --anim-delay: calc(var(--anim-duration) / 5);
    --opacity-hover-value: 100;
    --opacity-hover-anim-target: 50;

    opacity: calc(var(--opacity-hover-value) * 0.01);

    @apply transition-none !duration-[var(--anim-delay)] ease-linear hover:transition-opacity;
    @apply focus:animate-actionable-blink focus:[--opacity-hover-value:var(--opacity-hover-anim-target)];
    @apply hover:animate-actionable-blink hover:[--opacity-hover-value:var(--opacity-hover-anim-target)];
  }

  .with-dots {
    --tw-gradient-stops: theme("colors.brand.w1") 0px,
      theme("colors.brand.w1") 1px, transparent 1px,
      transparent calc(100% - 1px), theme("colors.brand.w1") calc(100% - 1px),
      theme("colors.brand.w1") 100%;

    @apply relative;
    @apply after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-0 after:z-10 after:h-px after:bg-gradient-to-r;
    @apply before:pointer-events-none before:absolute before:-bottom-0 before:left-0 before:right-0 before:z-10 before:h-px before:bg-gradient-to-r;
  }

  .with-diagonal-lines {
    @apply relative overflow-hidden;
    @apply after:pointer-events-none after:absolute after:-inset-12;
  }

  .with-diagonal-lines:after {
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5291_41301)' stroke='%23fff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5291_41301'%3E%3Cpath fill='%23fff' d='M0 0h64v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: repeat;
    animation: diagonalPatternAnimation 6s linear infinite;
  }
}

* {
  overscroll-behavior: none;
}

html {
  @apply scroll-smooth;
  font-feature-settings: "ss01";
  color-scheme: dark;
}

body {
  @apply bg-brand-k font-sans antialiased;
  text-rendering: optimizeLegibility;
}

*::selection {
  @apply bg-brand-o text-brand-k;
}

img {
  @apply select-none;
  pointer-events: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

@keyframes diagonalPatternAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 64px 0px;
  }
}

button:focus,
input:focus,
textarea:focus,
a:focus {
  @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-o focus-visible:ring-offset-2 focus-visible:ring-offset-brand-k;
}

.no-focus-styles:focus {
  outline: none !important;
  @apply ring-0 ring-offset-0 !important;
}

p {
  @apply !text-balance;
}

.blog-list {
  & li {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 9px;

      width: 4px;
      height: 4px;

      background-color: theme("colors.brand.o");
    }
  }
}

.blog-list-item {
  @apply marker:text-brand-o;

  & ol {
    @apply marker:text-brand-g1;
  }

  & ul {
    li {
      @apply before:!bg-brand-g1;
    }
  }
}

/* tweet component */

.react-tweet-theme {
  --tweet-bg-color: theme("colors.brand.k") !important;
  --tweet-bg-color-hover: rgba(255, 255, 255, 0.05) !important;
  --tweet-border: 1px solid theme("colors.brand.g2") !important;
  --tweet-color-blue-secondary-hover: rgba(255, 255, 255, 0.05) !important;
  --tweet-skeleton-gradient: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  ) !important;

  max-width: 100% !important;
  border-radius: 0 !important;

  & div[class*="media"],
  & div[class*="replies"] {
    border-radius: 0 !important;

    & > a {
      border-radius: 0 !important;
    }
  }
}
@keyframes marquee-translate {
  0% {
    transform: translateX(2%);
  }
  100% {
    transform: translateX(-48%);
  }
}

.marquee-container {
  position: relative;
  overflow: hidden;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  z-index: 1;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, black, transparent);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, black, transparent);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #23232329;
}

.contact-screen input:-webkit-autofill,
.contact-screen input:-webkit-autofill:hover,
.contact-screen input:-webkit-autofill:focus,
.contact-screen textarea:-webkit-autofill,
.contact-screen textarea:-webkit-autofill:hover,
.contact-screen textarea:-webkit-autofill:focus,
.contact-screen select:-webkit-autofill,
.contact-screen select:-webkit-autofill:hover,
.contact-screen select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ff4d00;
  background: transparent;
}
