@use '../object/editor';
@use '../foundation/colors';
@use '../foundation/typography';

$max-width: 30em !default;
$background: colors.$dark03 !default;
$color: colors.$text02 !default;
$font-size: .9em !default;
$line-height: 1.7 !default;
$box-shadow: 0 0 10px 4px rgba( colors.$shadow01, .08 ) !default;
$transition: opacity .1s ease !default;
$border: 0 !default;
$border-radius: 4px !default;
$header-padding: 8px 3em 10px 16px !default;
$header-border-bottom: 1px solid colors.$dark04 !default;
$title-font-size: 1em !default;
$title-color: colors.$text01 !default;
$body-padding: 16px !default;
$footer-padding: 5px 14px 14px !default;
$button-margin: 0 .4em !default;

.ryuseicode {
  $root: &;

  &__dialog {
    background: $background;
    border: $border;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    box-sizing: border-box;
    color: $color;
    left: 50%;
    max-width: $max-width;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate( -50%, -50% );
    transition: $transition;
    visibility: hidden;
    width: 95%;
    z-index: 2;

    &.is-active {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    &__group {
      position: relative;
    }

    &__close {
      background: transparent;
      margin: 0;
      position: absolute;
      right: 8px;
      top: 8px;
    }

    &__header {
      border-bottom: $header-border-bottom;
      padding: $header-padding;
    }

    &__title {
      border: 0;
      color: $title-color;
      font-size: $title-font-size;
      font-weight: normal;
      margin: 0;
      padding-top: .2em;
    }

    &__body {
      box-sizing: border-box;
      font-size: $font-size;
      line-height: $line-height;
      padding: $body-padding;

      ul {
        margin: .5em 0;
        padding-left: 1.5em;
      }

      li,
      p {
        margin: .5em 0;

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      strong,
      em {
        font-style: normal;
        font-weight: normal;
      }

      strong {
        color: colors.$text-strong;
      }

      em {
        color: colors.$text-em;
      }

      code {
        font-family: typography.$font-family-monospace;
      }
    }

    &__footer {
      padding: $footer-padding;
      text-align: right;

      #{ $root }__button {
        margin: $button-margin;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}