hensei-web/components/Dialog/index.scss

.Dialog {
  $multiplier: 4;

  animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
    openModal;
  background: var(--dialog-bg);
  border-radius: $card-corner;
  display: flex;
  flex-direction: column;
  gap: $unit * $multiplier;
  height: auto;
  min-width: $unit * 48;
  min-height: $unit-12x;
  padding: $unit * $multiplier;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;

  .DialogHeader {
    display: flex;
    align-items: center;
    gap: $unit;
    justify-content: space-between;

    .left {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: $unit;

      p {
        font-size: $font-small;
        line-height: 1.25;
      }
    }
  }

  .DialogClose {
    background: transparent;
    border: none;

    &:hover {
      cursor: pointer;

      svg {
        fill: $error;
      }
    }

    svg {
      fill: $grey-50;
      float: right;
      height: 24px;
      width: 24px;
    }
  }

  .DialogTitle {
    color: var(--text-primary);
    font-size: $font-xlarge;

    h1 {
      color: var(--text-primary);
      font-size: $font-xlarge;
      font-weight: $medium;
      text-align: left;
    }
  }

  .DialogTop {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: calc($unit / 2);

    .SubTitle {
      color: var(--text-secondary);
      font-size: $font-small;
      font-weight: $medium;
    }
  }

  .DialogDescription {
    color: var(--text-secondary);
    flex-grow: 1;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  &.Conflict.Dialog {
    $weapon-diameter: 14rem;

    & > p {
      line-height: 1.2;
      max-width: 400px;

      strong {
        font-weight: $bold;
      }

      &:lang(ja) {
        line-height: 1.4;
      }
    }

    .weapon,
    .character {
      display: flex;
      flex-direction: column;
      gap: $unit;
      text-align: center;
      width: $weapon-diameter;
      font-weight: $medium;

      img {
        border-radius: 1rem;
        width: $weapon-diameter;
        height: auto;
      }

      span {
        line-height: 1.3;
      }
    }

    .Diagram {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: flex-start;

      &.CharacterDiagram {
        align-items: center;
      }

      ul {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: $unit * 2;
      }

      .wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .arrow {
        align-items: center;
        color: $grey-55;
        display: flex;
        font-size: 4rem;
        text-align: center;
        height: $weapon-diameter;
        justify-content: center;
      }
    }

    footer {
      display: flex;
      flex-direction: row;
      gap: $unit;

      .Button {
        font-size: $font-regular;
        padding: ($unit * 1.5) ($unit * 2);
        width: 100%;

        &.btn-disabled {
          background: $grey-90;
          color: $grey-70;
          cursor: not-allowed;
        }

        &:not(.btn-disabled) {
          background: $grey-90;
          color: $grey-50;

          &:hover {
            background: $grey-80;
          }
        }
      }
    }
  }
}