/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  tab-size: 2;
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  text-wrap: balance;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 5px Canvas;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

h1 {
  font-size: 1.2rem;
}
/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

:root {
  /* 色定義 */
  color-scheme: light dark;
  --color-black: hsl(200 20% 10%);
  --color-black-25: hsl(200 20% 10%/0.25);
  --color-black-50: hsl(200 20% 10%/0.5);
  --color-white: hsl(200 20% 98%);
  --color-white-25: hsl(200 20% 98%/0.25);
  --color-white-50: hsl(200 20% 98%/0.5);
  --color-white-gray: hsl(200 20% 88%);
  --color-gray: hsl(200 20% 50%);
  --color-main: hsl(200 70% 50%);
  --color-main-dark30: light-dark(hsl(200 70% 35%), hsl(200 70% 80%));
  --color-main-light50: light-dark(hsl(200 70% 80%), hsl(200 70% 25%));
  --color-main-dark30-50: light-dark(
    hsl(200 70% 35%/0.5),
    hsl(200 70% 80%/0.5)
  );

  --color-accent: light-dark(hsl(25 90% 50%), hsl(25 90% 65%));
  --color-font: light-dark(var(--color-black), var(--color-white-gray));
  --color-font-25: light-dark(var(--color-black-25), var(--color-white-25));
  --color-font-50: light-dark(var(--color-black-50), var(--color-white-50));
  --color-background: light-dark(var(--color-white), var(--color-black));
  --color-background-25: light-dark(
    var(--color-white-25),
    var(--color-black-25)
  );
  --color-background-50: light-dark(
    var(--color-white-50),
    var(--color-black-50)
  );

  /* フォント定義 */
  --font-gothic: "Noto Sans JP", sans-serif;
  --font-maru-gothic: "Zen Maru Gothic", serif;
  --font-decorative: "Yusei Magic", sans-serif;

  /* 基本サイズ定義 */
  --base-size: clamp(0.625rem, 1.412vw + 0.294rem, 1rem);
  /* size: 10px -> 16px, viewport: 375px -> 800px */

  /* コンテンツ幅定義 */
  --content-width: min(100%, 50rem);
}

/* カラースキーム */
:root {
  color-scheme: light;
}

:root:has(#is-dark-theme:checked) {
  color-scheme: dark;
}

/* サイト基本設定 */
body {
  color: var(--color-font);
  background: linear-gradient(to bottom, transparent, var(--color-main)),
    var(--color-background);
  transition: color 0.5s linear, background 0.5s linear;
  min-height: 100vh;
  font-family: var(--font-maru-gothic);
  font-size: var(--base-size);
  letter-spacing: 0.05em;
}

/* インプットの文字選択時の色設定 */
input::selection {
  background: var(--color-main-light50);
}

/* Layout */
.l-body-wrapper {
  display: grid;
  justify-items: center;
  grid-template-rows: auto 1fr auto;
  gap: 1.5em;
  min-height: 100svh;
  overflow: clip;
  padding-inline: 2em;
}

.l-header,
.l-main,
.l-footer {
  width: var(--content-width);
}

.l-modal {
  place-self: center;
}

.l-svg {
  position: absolute;
  z-index: -9999;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* component */
/* 言語設定 */
.c-lang-ja {
  display: initial;

  *:has(#is-en:checked) & {
    display: none;
  }
}

.c-lang-en {
  display: none;

  *:has(#is-en:checked) & {
    display: initial;
  }
}

/* 見出し */
.c-title {
  display: grid;
  gap: 0rem;

  & > h1 {
    font-family: var(--font-decorative);
    font-size: 3em;

    @media (width < 576px) {
      font-size: 2.5em;
    }

    @media (width < 376px) {
      font-size: 2em;
    }
  }

  & > h2 {
    font-family: var(--font-decorative);
    font-size: 1.75em;
  }
}

/* テキスト内のリンク */
.c-text-link {
  color: var(--color-font);
  @media (any-hover: hover) {
    transition: color ease-in-out 0.5s;
    &:hover {
      color: var(--color-accent);
    }
  }
  &:focus-visible {
    outline: 1px solid var(--color-accent);
    box-shadow: none;
  }
}

/* 言語設定用スイッチ */
.c-settings-switch {
  display: grid;
  justify-items: center;
  align-self: start;
  position: relative;
  z-index: 0;

  &:has(:focus-visible) {
    outline: 3px solid var(--color-accent);
  }
}

.c-settings-switch__label {
  grid-area: 2/ 1/ 3/ -1;
  font-size: 0.75em;
}

.c-settings-switch__hidden {
  grid-area: 1/ 1/ 2/ -1;
  width: 2em;
  aspect-ratio: 1/ 1;
  opacity: 0;
  cursor: pointer;
}

.c-lang-switch__button {
  grid-area: 1/ 1/ 2/ -1;
  display: grid;
  width: 2em;
  aspect-ratio: 1/ 1;
  z-index: -1;
  place-items: center;

  &::before,
  &::after {
    display: none;
    grid-area: 1/ 1/ -1/ -1;
    width: 95%;
    aspect-ratio: 1/ 1;
    cursor: pointer;
    padding-block: 0.25em;
    border-radius: 0.25em;
    background: var(--color-font);
    color: var(--color-background);
    text-align: center;
    font-weight: 700;
    font-size: 0.875em;
  }

  &::before {
    content: "EN";
  }

  &::after {
    content: "JP";
  }

  .c-settings-switch:has(:checked) &::before {
    display: block;
  }

  .c-settings-switch:not(:has(:checked)) &::after {
    display: block;
  }
}

/* ライト・ダークモード用スイッチ */
.c-theme-switch__button {
  grid-area: 1/ 1/ 2/ -1;
  display: grid;
  width: 2em;
  aspect-ratio: 1/ 1;
  z-index: -1;
  place-items: center;

  &::after {
    content: "";
    grid-area: 1/ 1/ -1/ -1;
    display: flex;
    justify-content: center;
    width: inherit;
    aspect-ratio: 1/ 1;
    overflow: hidden;
    opacity: 1;
    cursor: pointer;
    z-index: 1;
    border: 1px solid var(--color-font-50);
    border-radius: 100vmax;
    background-image: url(../images/light_mode.svg),
      url(../images/dark_mode.svg),
      linear-gradient(
        to right,
        var(--color-white) 0 50%,
        var(--color-black) 50% 100%
      );

    background-size: 1em 1em, 1em 1em, 4em 100%;
    background-position: center center, left 180% center, left center;
    background-repeat: no-repeat;
    transition: background-position linear 0.25s;
  }

  .c-settings-switch:has(:checked) &::after {
    background-position: right 180% center, center center, right center;
  }
}

/* ハンバーガーメニュー */
.c-hamburger {
  grid-area: 1/ 1/ 2/ -1;
  display: grid;
  --height: 2px;
  width: 2em;
  aspect-ratio: 1/ 1;
  z-index: -1;
  padding-inline: 0.125em;
  place-items: center;
  border-radius: 100vmax;

  & > span {
    grid-area: 1/ 1/ -1/ -1;
    width: 100%;
    height: var(--height);
    background: currentColor;
    transition: translate 0.25s 0.25s ease-in-out, rotate 0.25s ease-in-out,
      opacity 0s 0.25s ease-in-out;

    &:nth-child(1) {
      translate: 0 -0.55em;
    }

    &:nth-child(3) {
      translate: 0 0.55em;
    }
  }

  .c-settings-switch:has(:checked) & {
    & > span {
      transition: translate 0.25s ease-in-out, rotate 0.25s 0.25s ease-in-out,
        opacity 0s 0.25s ease-in-out;
      &:nth-child(1) {
        translate: 0;
        rotate: 45deg;
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        translate: 0;
        rotate: -45deg;
      }
    }
  }
}

/* 入力欄の項目名 */
.c-item-name {
  width: 6em;
  color: var(--color-accent);
  font-weight: 700;
  font-family: var(--font-decorative);
  text-align: justify;
  font-size: 1.125em;
}

/* 入力欄グループ */
.c-input {
  display: flex;
  gap: 0.5em;
  align-items: center;
  font-size: 1em;

  &:after {
    display: inline-block;
    width: 1.5em;
    content: "px";
  }

  .p-inputs__item:has(:where(#size-rem, #vp-rem):checked) &:after {
    content: "rem";
  }
}

/* 入力欄ラベル */
.c-input__label {
  min-width: 2.25em;
  font-family: var(--font-decorative);
  font-size: 1em;
}

/* 入力欄のインプット要素 */
.c-input__number {
  border: 1px solid var(--color-font);
  align-items: center;
  width: 4.2em;
  padding-inline: 0 0.8em;
  opacity: 0.5;
  border-radius: 0.4em;
  cursor: pointer;
  font-size: 1.25em;
  font-family: var(--font-maru-gothic);
  text-align: right;
  transition: opacity ease-in 0.25s, color ease-in 0.25s;

  &:focus-within {
    opacity: 1;
    border: 1px solid var(--color-accent);
    outline: none;
    box-shadow: 0 0 2px 2px var(--color-accent);
  }

  /* スピンボタンを消す処理 */
  appearance: textfield;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* スイッチ */
.c-switches {
  display: flex;
  @media (width < 768px) {
    margin-left: 2.75em;
  }
}

.c-switch {
  display: grid;
  position: relative;

  & > * {
    grid-area: 1/ 1/ -1/ -1;
  }
}

.c-switch__label {
  display: grid;
  place-items: center;
  min-width: 3.5em;
  padding: 0.25em 0.4em;
  opacity: 0.4;
  border: 1px solid currentcolor;
  font-size: 0.75em;
  transition: all linear 0.25s;

  @media (any-hover: hover) {
    &:hover {
      opacity: 1;
    }
  }

  &:has(+ input:checked) {
    opacity: 1;
    border: 1px solid var(--color-gray);
    background: var(--color-white-50);
    color: var(--color-black);
  }

  .c-switch:has(:focus-visible) & {
    box-shadow: 0 0 1px 3px var(--color-accent);
  }

  .c-switch:first-child & {
    border-radius: 0.375em 0 0 0.375em;
  }

  .c-switch:last-child & {
    border-radius: 0 0.375em 0.375em 0;
  }

  .c-switch:not(:first-child) & {
    margin-left: -1px;
    border-left-color: transparent;

    &:hover {
      border-left-color: currentColor;
    }
    &:has(+ :checked) {
      border-left-color: var(--color-gray);
    }
  }
}

.c-switch__hidden {
  opacity: 0;
  z-index: -1;
}

.c-option__name {
  font-family: var(--font-decorative);
  color: var(--color-font);
  min-width: 5.75em;
  max-width: 8em;
}

.c-option__list {
  display: flex;
}

/* 角丸ボタン */
.c-round-button {
  display: grid;
  place-items: center;
  width: 6.5em;
  aspect-ratio: 2.5/ 1;
  opacity: 0.8;
  border-radius: 100vmax;
  border: 0.125rem solid var(--color-main-dark30-50);
  font-family: var(--font-decorative);
  line-height: 100%;
  color: var(--color-main-dark30);
  transition: all 0.25s linear;

  @media (any-hover: hover) {
    &:not(:disabled):is(:hover, :focus-within) {
      opacity: 1;
      border-color: var(--color-main);
      box-shadow: 0 0 0.1rem 0.1rem var(--color-white);
      background: var(--color-main);
      color: var(--color-white);
    }
  }

  @media (any-hover: none) {
    &:not(:disabled) {
      border-color: var(--color-main-dark30);
      background: var(--color-main);
      color: var(--color-white);
    }
  }

  &:disabled {
    opacity: 0.2;
  }
}

/* SNSアイコン */
.c-sns-icon {
  display: inline-block;
  width: 100%;
  height: 100%;

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    box-shadow: none;
  }
}

/* copyright */
.c-copyright-text {
  font-size: 0.75em;
  line-height: 1;
}

/* 以下プレビュー画面のコンポーネント */
/* クローズボタン */
.c-close {
  display: grid;
  justify-items: center;
}

.c-close__button {
  display: grid;
  place-items: center;
  width: 2em;
  aspect-ratio: 1/ 1;
  border-radius: 50%;
  border: 1px solid var(--color-main-dark30-50);
  font-family: var(--font-decorative);
  line-height: 1;
  color: var(--color-main-dark30-50);
  transition: all 0.25s linear;

  & svg {
    width: 1.5em;
    aspect-ratio: 1/ 1;
  }

  @media (any-hover: hover) {
    &:is(:hover, :focus-within) {
      border-color: var(--color-main);
      color: var(--color-font);
      background: var(--color-background);
    }
  }

  @media (any-hover: none) {
    color: var(--color-font);
    background: var(--color-background);
  }
}

.c-close__label {
  font-size: 0.75em;
  color: var(--color-main-dark30-50);
  transition: all 0.25s linear;

  @media (any-hover: hover) {
    :is(:hover, :focus-within) + & {
      color: var(--color-font);
    }
  }

  @media (any-hover: none) {
    color: var(--color-font);
  }
}

/* プレビューの項目名 */
.c-preview-category-name {
  font-family: var(--font-decorative);
  font-size: 1.25em;
  color: var(--color-main-dark30);

  &.m-input-possible {
    color: var(--color-accent);
  }
}

/* project */
/* ヘッダー */
.p-header {
  display: flex;
  align-items: flex-end;
  gap: 0.75em;
  justify-content: space-between;
  position: relative;
  padding-block: 1.5em 1em;
}

/* ヘッダーメニュー */
.p-display-settings {
  display: flex;
  justify-content: center;
  gap: 1.5em;

  @media (width < 768px) {
    position: absolute;
    --inline-position: calc((100vw - 100%) / 2 * -1);
    top: 0;
    left: 0;
    right: 0;
    padding-block: 1.5em;
    backdrop-filter: blur(3px);
    translate: 0 -100%;
    opacity: 0;
    transition: translate 0.5s ease-in-out, opacity 0.5s ease-in-out;

    &::before {
      content: "";
      justify-self: center;
      position: absolute;
      width: 100vw;
      top: 0;
      bottom: 0;
      margin-left: var(--inline-position);
      margin-right: var(--inline-position);
      opacity: 0.9;
      background: var(--color-main-light50);
      box-shadow: 0 0.125em 0.125em var(--color-black-25);
    }

    .p-header:has(#mobile-menu:checked) & {
      translate: 0;
      opacity: 1;
    }
  }
}

/* モバイル画面（ハンバーガーメニュー）用 */
.p-mobile-menu-button {
  align-self: flex-start;
  display: none;
  place-items: center;
  z-index: 2;
  width: 2rem;

  @media (width < 768px) {
    display: grid;
  }
}

/* メイン */
.p-main {
  display: flex;
  flex-flow: column;
  gap: 1.5em;
}

/* 入力欄 */
.p-inputs {
  padding: 1.5em 2em;
  border-radius: 2em;
  border: 0.1875em solid var(--color-main-dark30-50);
}

.p-inputs__list {
  display: grid;
  gap: 1rem;

  @media (width < 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-inputs__item {
  display: flex;
  gap: 1em 2em;
  align-items: center;
  @media (width < 768px) {
    flex-flow: column;
    align-items: flex-start;
  }
}

/* 出力欄 */
.p-output {
  display: flex;
  gap: 1.5em;
  align-items: center;
  min-height: 6rem;
  padding: 1em 2em;
  border-radius: 2em;
  background: var(--color-background-50);
}

/* 出力するコードテキスト */
.p-output__codes {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.p-output__code {
  font-size: 1rem;
  line-height: 150%;
  font-weight: 700;
  color: var(--color-font);
  font-size: 1.25em;

  &.m-comment {
    opacity: 0.8;
    color: var(--color-accent);
  }

  &.is-error {
    color: var(--color-main);
  }
}

/* コピーボタン用 */
.p-output__button-box {
  display: flex;
  position: relative;
  justify-content: center;
}

.p-output__button {
  display: grid;
  place-items: center;
  padding: 1.2em 2em;
  border-radius: 100vmax;
  opacity: 0.6;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.625em;
  transition: opacity 0.25s linear, box-shadow 0.25s linear;

  &::before {
    content: "";
    background: url(../images/content_copy.svg) center/cover;
    width: 1.25rem;
    aspect-ratio: 1/ 1;
  }

  &:disabled {
    opacity: 0.2;
  }

  @media (any-hover: hover) {
    &:not(:disabled):is(:hover, :focus-within) {
      opacity: 1;
      box-shadow: 0 0 0.2rem var(--color-background-50);
    }
  }
  @media (any-hover: none) {
    opacity: 0.8;
  }
}

.p-output__results {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  top: 0;
  visibility: hidden;
  padding: 0.5rem 0;
  width: 5.5rem;
  opacity: 0;
  z-index: -1;
  border-radius: 100vmax;
  background: var(--color-accent);
  font-family: var(--font-decorative);
  font-size: 1rem;
  color: var(--color-white);

  &::after {
    position: absolute;
    top: 96%;
    content: "";
    width: 1em;
    aspect-ratio: 1/ 1;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  &.is-active {
    animation: popup 1.5s ease-in-out;
  }
}

/* その他オプション */
.p-others {
  display: flex;
  gap: 1em 1.5em;
  align-items: center;
  flex-flow: wrap;
}

/* 出力オプション用 */
.p-option {
  flex-grow: 1;
  padding: 1rem 1.5rem;
  border-radius: 1.5rem;
  border: 0.125rem solid var(--color-main-dark30-50);

  @media (width < 576px) {
    flex-basis: 100%;
    grid-template-columns: 1fr;
  }
}

.p-option__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 0;
  padding-left: 0.5rem;

  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.p-option__legend {
  padding-inline: 0.5rem;
  font-family: var(--font-decorative);
  color: var(--color-main-dark30);
}

.p-option__group {
  display: flex;
  align-items: center;
  gap: 1.25rem;

  &.m-column-full {
    grid-column: 1/ -1;
  }
}

/* プレビュー表示ボタン用 */
.p-preview-controller {
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* フッター */
.p-footer {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  border-top: 1px solid var(--color-main-dark30-50);
  padding-block: 1.5em;
}

.p-sns {
  display: flex;
  gap: 1em;
  align-items: flex-start;
}

.p-sns-item {
  width: 1.5em;
  aspect-ratio: 1/ 1;
}

.p-copyright {
  justify-self: flex-end;
  display: grid;
  gap: 0.5em;
  justify-items: end;
  align-content: center;
  margin-left: auto;
}

/* プレビューモーダル */
.p-modal {
  display: grid;
  justify-items: center;
  grid-template-rows: 0fr;
  z-index: -100;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: none;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows 0.5s linear, z-index 0.5s linear,
    visibility 0.5s linear, opacity 0.5s linear;
  border: none;
  outline: none;
  box-shadow: none;
  outline-offset: 0;
  background: var(--color-main-light50);

  &[open] {
    grid-template-rows: 1fr;
    z-index: 100;
    visibility: visible;
    opacity: 1;
  }
}

/* プレビューメインコンテンツ */
.p-preview-modal {
  display: flex;
  flex-flow: column;
  gap: 1.5em;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2em;
  overflow: hidden;

  @media (width < 576px) {
    padding-top: 4em;
  }
}

/* プレビューヘッダー */
.p-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: min(100%, var(--content-width));
}

/* プレビュー説明文 */
.p-preview-info {
  display: grid;
  gap: 0.125em;
  width: min(100%, var(--content-width));

  & > p {
    height: 100%;
  }
}

/* 現在の設定表示 */
.p-preview-func {
  display: flex;
  align-items: center;
  gap: 1.5em;
  width: min(100%, var(--content-width));
}

.p-preview-func__code {
  padding: 0.5em 1.5em;
  border-radius: 100vmax;
  background: var(--color-background-25);
  color: var(--color-main-dark30);
}

.p-preview-settings {
  display: flex;
  align-items: center;
  gap: 0.25em 1em;
  width: min(100%, var(--content-width));

  @media (width < 576px) {
    flex-flow: column;
    align-items: flex-start;
  }
}

.p-preview-settings__box {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.p-preview-settings__output-value {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  height: 100%;
  font-family: var(--font-gothic);
  font-size: 1.5em;
  line-height: 1.25;

  &::after {
    content: "px";
    font-size: 0.8em;
  }
}

.p-preview-settings__icon {
  width: 2em;
  aspect-ratio: 1/1;
  color: var(--color-font-50);
  @media (width < 576px) {
    rotate: 90deg;
  }
}

.p-preview-settings__output {
  height: 100%;
  font-family: var(--font-decorative);
  font-size: 1.25em;
}

/* プレビュー表示画面 */
.p-preview-modal__output {
  display: grid;
  justify-items: center;
  width: 100vw;
  background: var(--color-background-25);
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-color: var(--color-font-50) transparent;
}

.p-preview-modal__output-inner {
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 100%;
  background: var(--color-background-25);
}

.p-output__info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-block: 0.25rem;
  padding-inline: 2px;
  opacity: 0.5;

  &::before,
  &::after {
    flex-grow: 1;
    content: "";
    margin-top: 0.2em;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      currentColor,
      currentColor 2px,
      transparent 2px,
      transparent 8px
    );
  }
}

.p-output__text {
  width: var(--width);
  padding: 1rem;
  height: 100%;
  border: none;
  background: var(--color-background);
  resize: none;
  border-radius: 1rem;
  font-size: var(--font);
  font-family: var(--font-gothic);
  line-height: calc(100% + 1rem);

  &:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px currentColor;
  }
}

/* animation */
@keyframes popup {
  0% {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
  }

  5% {
    visibility: visible;
    z-index: 2;
    translate: 0;
  }

  30% {
    opacity: 1;
    translate: 0 -3rem;
  }

  65% {
    opacity: 1;
    translate: 0 -3rem;
  }

  95% {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    translate: 0 -4.5rem;
  }

  100% {
    translate: 0;
  }
}