@import "../../variables.less";

@{prefix}modal {
  display: none;
  width: 100%;
  .box-sizing(border-box);

  &@{prefix}dialog-show {
    display: block;
  }

  @{prefix}dialog-inner {
    width: 450px;
    left: 50%;
    top: 100px;
    position: fixed;
    z-index: @z-index-modal;
    .transform(translate(-50%, 0));
    .border-radius(3px);
    background: @tile-bg;
    .modal-drop();

    @{prefix}modal-header {
      background-color: @button-secondary;
      position: relative;
      .display-flex();
      height: 48px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      @{prefix}close,
      @{prefix}header-item {
        border-bottom: 4px solid transparent;

        &:focus {
          outline: 0;
          border-bottom: 4px solid @text-base;
        }
      }

      h2 {
        font-size: @text-normal;
        color: @text-base;
        font-weight: @weight-normal;
        .align-self(center);
        padding: 8px 24px;
        border-bottom: 4px solid transparent;
      }

      @{prefix}close {
        background-color: transparent;
        color: @text-base;
        font-size: @text-normal;
        .align-self(center);
        margin-left: auto;
        padding: 8px 10px;
        height: 100%;
      }
    }

    @{prefix}content {
      padding: 0 @space-large 0 @space-large;
      margin-bottom: 60px; // the height of the footer
      overflow-y: auto;

      @{prefix}text-input,
      @{prefix}textarea {
        width: 100%;
      }

      h3 {
        font-weight: @weight-light;
        margin: @space-large 0 @space-large/2 0;
        padding: 0;
      }
    }

    @{prefix}modal-footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 60px;
      .display-flex();
      .align-items(center);
      border-top: 1px solid @field-disabled;
      padding: 0 @space-large;
      .box-sizing(border-box);
      background: @tile-bg;

      button {
        margin: 0 @space-small 0 0;
      }
    }
  }

  @{prefix}screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: @scrim;
    position: fixed;
    z-index: @z-index-modal-scrim;
  }
}
