html {
  scroll-behavior: smooth;
}

/**
 * inputs ---------------------------------------
 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: var(--wp--preset--color--border-neutral);
  border-radius: var(--wp--custom--border-radius--30);
  outline: none;
  padding: 14px;
  font-size: 16px;
  color: currentColor;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: 2px solid var(--wp--preset--color--primary);
}

.wp-block-comments textarea#comment {
  margin-top: 5px;
}

/**
 * core/button =============================================
 */

.wp-block-button.is-style-outline .wp-block-button__link {
  color: currentColor;
  border: none;
  padding: 14px 28px;
  outline: 1px solid var(--wp--preset--color--border-neutral);
  outline-offset: -1px;
}
.wp-block-button.is-style-secondary-button .wp-element-button {
  color: var(--wp--preset--color--primary);
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--primary) 8%,
    white
  );
}
.wp-block-button.is-style-tertiary-button .wp-element-button {
  background: none;
  padding: 0;
  color: var(--wp--preset--color--content-link);
}

/**
 * core/search  =============================================
 */

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--wp--custom--border-radius--40);
  border-style: solid;
  border-width: 1px;
  border-color: var(--wp--preset--color--border-neutral);
  outline: none;
}

/**
 * core/details =============================================
 */

.wp-block-details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details > summary::after {
  content: "+";
  margin-left: 1ch;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
}

.wp-block-details[open] > summary::after {
  content: "-";
}

/**
 * core/cover =============================================
 */
.wp-block-post .wp-block-cover {
  background: url("../images/placeholder.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/**
 * Additions =============================================
 */

/* positions */
.absolute {
  position: absolute !important;
}
.relative {
  position: relative;
}
.top-0 {
  top: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}
.z-index-10 {
  z-index: 10;
}
.z-index-20 {
  z-index: 20;
}
.z-index-30 {
  z-index: 30;
}
.z-index-40 {
  z-index: 40;
}
.z-index-50 {
  z-index: 50;
}
.z-index-999 {
  z-index: 999;
}

/* inverted radius */

.inverted-radius {
  --r: 20px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 10px; /* horizontal offset (no percentange) */
  --y: 10px; /* vertical offset (no percentange) */

  --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
        72%);
  --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px))
      calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  mask-repeat: no-repeat;
}

/* glass effect */

.glass-filter-1 {
  backdrop-filter: blur(5px);
}

.glass-filter-2 {
  backdrop-filter: blur(10px);
}

.glass-filter-3 {
  backdrop-filter: blur(15px);
}

.glass-filter-4 {
  backdrop-filter: blur(20px);
}
