@charset "utf-8";

/* row選択中 ****************************************************/
body[data-state="1"] {
  header {
    pointer-events: none;
  }

  main {
    pointer-events: none;
  }

  .card-image {
    opacity: 0.15;
  }

  .row-item.active {
    .label {
      pointer-events: auto;
    }
  }

  .row-item:not(.active) {
    .label-outer {
      opacity: 0.15;
    }
  }

  .row-list {
    .row-item {
      .row-menu-button-container {
        .row-menu-button {
          opacity: 0.15;
        }
      }
    }
  }
}

/* label編集中 **************************************************/
body[data-state="2"] {
  pointer-events: none;

  .card-image {
    opacity: 0.15;
  }

  .label-outer:not(:has(:focus)) {
    opacity: 0.15;
  }

  .label:focus {
    pointer-events: auto;
  }

  .row-list {
    .row-item {
      .row-menu-button-container {
        .row-menu-button {
          opacity: 0.15;
        }
      }
    }
  }
}

/* カードdrag中 **************************************************/
body[data-state="3"] {
  .label {
    pointer-events: none;
  }
}

/* preview表示中 ************************************************/
body[data-state="4"] {
  .menu-container {
    display: none;
  }

  .preview-menu-container {
    display: block;
  }

  .preview-section {
    display: block;

    .canvas {
      display: block;
      max-width: 100%;
    }

    .preview-message {
      font-size: 14px;
      margin-top: 4px;
    }
  }

  .main-section {
    display: none;
  }
}

/* information表示中 ********************************************/
body[data-state="5"] {
  .menu-container {
    display: none;
  }

  .info-menu-container {
    display: block;
  }

  .info-section {
    display: block;

    a {
      color: var(--link-color);
    }

    @media (hover: hover) {
      a:hover {
        color: var(--link-hover-color);
      }
    }
  }

  .main-section {
    display: none;
  }
}