@charset "UTF-8";
@import '@craftcms/sass/mixins';

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--gray-100) url('images/installer-bg.png') no-repeat 50% 50%;
  background-size: cover;
}

.beginbtncontainer {
  position: absolute;
  inset-block-start: 50%;
  margin-block-start: -25px;
  width: 100%;
  text-align: center;
}

#beginbtn {
  display: inline-block;
  border-radius: var(--radius-lg);
  font-size: 19px;
  height: 50px;
  padding-block: 0;
  padding-inline: 24px;
  box-shadow:
    inset 0 1px #fff3,
    inset 0 -1px #0002,
    0 0 0 1px #21377066,
    0 0 1px 2px #21377055,
    0 10px 10px -10px #213770,
    0 10px 20px -10px #213770;

  &::after {
    margin-block-start: -4px;
  }
}

#install-modal {
  width: 770px;
  height: 510px;
  padding: 0;

  #screens {
    &,
    .screen {
      width: 100%;
      height: 100%;
    }

    .screen {
      padding: 35px;
      box-sizing: border-box;
      background: no-repeat 0 50%;
      background-size: 368px 477px;

      &#db {
        background-image: url('./images/db.png');
      }

      &#site {
        background-image: url('./images/site.png');
      }

      &#account {
        background-image: url('./images/account.png');
      }

      h1 {
        margin-block-end: 35px;
        text-align: center;
        position: relative;
      }

      form {
        width: 50%;
        float: inline-end;

        .select {
          &,
          select {
            width: 100%;
          }
        }
      }
    }
  }

  #dots {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 0;
    width: 100%;
    text-align: center;

    & > div {
      display: inline-block;
      border-radius: 4px;
      border: 1px solid var(--border-hairline);
      width: 6px;
      height: 6px;

      & + div {
        margin-inline-start: 5px;
      }

      &.sel {
        border-color: var(--border-primary);
        background: var(--bg-primary);
      }
    }
  }
}

.grid {
  margin-block: 35px;
}

.buttons {
  position: absolute;
  inset-block-end: 35px;
  @include right(35px);

  .btn {
    padding-inline-end: 10px;

    &::after {
      @include icon;
      margin-inline: 4px 0;
      margin-block: -2px 0;
      font-size: 20px;
      width: 20px;
      height: 20px;
      line-height: 18px;

      body.ltr & {
        content: 'rarr';
      }

      body.rtl & {
        content: 'larr';
      }
    }
  }
}

input.hidden {
  position: absolute;
  inset-block-start: 100px;
}

#license {
  padding: 0 !important;
  overflow-y: scroll;

  #license-content {
    padding-block: 70px;
    padding-inline: 105px;

    .license {
      &,
      h1 {
        font-family: Menlo, monospace;
        font-size: 13px;
        line-height: 25px;
      }

      h1 {
        font-weight: bold;
      }
    }

    #license-accept {
      margin-block-start: 35px;
      display: flex;
      justify-content: center;
    }
  }
}

#installing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .pane {
    max-width: 40em;
    @include fixed-width-font;
    color: var(--white);
    background-color: var(--gray-800);

    code {
      color: var(--yellow-300);
      border: 0;
      padding: 0;
      background-color: transparent;
    }
  }

  #spinner {
    display: block;
    margin-block: 0;
    margin-inline: auto;
  }

  .buttons {
    .btn {
      margin: 0;
      float: none;
    }
  }
}
