.dialog {
  $self: &;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;

  &--mask {
    pointer-events: all;
  }

  &__mask {
    background-color: var(--theme-background-50);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
  }

  &__content {
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: var(--theme-background-100);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    color: var(--theme-color-100);
    overflow: hidden;
    pointer-events: all;
    position: relative;
    max-width: 100%;
    max-height: 100%;

    p {
      line-height: 1.4;
    }

    @media screen and (min-width: 580px) {
      max-width: 61.8vw;
      max-height: 90%;
    }

    @media screen and (min-width: 1400px) {
      max-width: 50vw;
    }

    @media screen and (min-width: 2560px) {
      max-width: 35vw;
    }

    .dialog--size-large & {
      width: 420px;

      @media screen and (min-width: 580px) {
        max-width: 90vw;
      }
    }

    .dialog--size-wide & {
      width: 920px;

      @media screen and (min-width: 580px) {
        max-width: 90vw;
      }
    }

    .dialog--size-medium & {
      width: 375px;
    }

    .dialog--size-small & {
      width: 325px;
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
    flex-grow: 1;

    @media screen and (min-width: 580px) {
      max-height: 66vh;
    }
  }

  @media screen and (max-width: 579px), (max-height: 420px) {
    &:not(.dialog--size-small):not(.dialog--moved) {
      .dialog__content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        transform: none !important;
        border-radius: 0;
      }

      .dialog__body {
        max-height: 100%;
      }
    }
  }

  &__header {
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 0.75rem;
    height: 1rem;
    background-color: var(--theme-background-100);
    border-bottom: 1px solid var(--theme-background-150);
    border-radius: 0.75rem 0.75rem 0 0;
    cursor: grab;

    &-wrapper {
      position: relative;
      user-select: none;
    }

    #{$self}--contrasted & {
      border-bottom: 0 !important;
      background-color: var(--theme-base-o25);
    }

    #{$self}--borderless & {
      border: 0;
    }

    > .btn {
      align-self: center;
      span {
        display: none;
      }

      @media screen and (min-width: 580px) {
        span {
          display: block;
        }
      }
    }

    .checkbox-control > input:not(:checked) + div {
      background: 0;
    }
  }

  &__subheader {
    position: relative;
    z-index: 1;

    #{$self}--contrasted & {
      background-color: var(--theme-base-o25);
    }
  }

  &__title {
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 1px;
    font-size: 1.125rem;
    line-height: 1;
    font-family: $font-condensed;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--theme-color-base);

    &.-editable {
      cursor: text;
    }

    code {
      text-transform: none;
    }
  }

  &__footer {
    padding: 0.75rem;
    justify-content: flex-end;
    border-top: 1px solid var(--theme-background-150);

    #{$self}--borderless & {
      border: 0;
    }

    #{$self}--small & {
      padding: 0.5rem;
    }
  }

  &__resize {
    display: none;
    position: absolute;
    font-size: 1rem;
    padding: 1rem 0 0 1rem;
    right: -0.0625rem;
    bottom: -0.0625rem;
    z-index: 10;
    top: auto;
    cursor: se-resize;

    &:before {
      display: inline-block;
      transform: rotateZ(-225deg) scale(1);
      transition: transform 0.2s;
      opacity: 0.5;
    }

    &:hover:before {
      transform: translate(5%, 5%) rotateZ(-225deg) scale(1);
      opacity: 1;
    }

    #{$self}--moved & {
      display: block;
    }

    @media screen and (min-width: 580px) {
      display: block;
    }
  }

  .dialog__controls {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    > * {
      margin-left: 15px;
    }
  }

  .dialog__close {
    text-align: center;
    margin: 0 -0.5rem 0 0.5rem;
    color: var(--theme-color-100);

    &:hover {
      color: var(--theme-color-base);
    }

    > i {
      vertical-align: middle;
    }
  }

  &-enter-active {
    transition: opacity 0.2s ease-out;

    #{$self}__content {
      transition: transform 0.3s $ease-out-expo;

      @media screen and (min-width: 768px) {
        transition-timing-function: $ease-elastic;
      }
    }
  }

  &-leave-active {
    transition: opacity 0.2s $ease-out-expo;
    pointer-events: all;

    #{$self}__content {
      transition: transform 0.2s $ease-out-expo;
    }
  }

  &-enter,
  &-leave-to {
    opacity: 0;

    #{$self}__content {
      transform: translateY(100%);

      @media screen and (min-width: 768px) {
        transform: scale(0.8) translateY(1.5rem);
      }
    }
  }

  &-leave,
  &-leave-to {
    pointer-events: none;
  }

  &--small {
    .-dialog-min-m {
      display: none;
    }
  }
}
