@import "ui-variables";

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4em;
  font-size: 1.25em;
  line-height: 1.4;
  color: @text-color;
  background-color: @base-background-color;
  overflow-x: auto;

  // Overrides ----------------------

  p {
    line-height: inherit;
  }

  a {
    color: @text-color-info;
  }

  ul {
    padding-left: 2em;
  }

  // Components ----------------------

  &-container {
    width: 100%;
    max-width: 400px;
  }

  &-header {
    margin: 0 0 6em 0;
  }

  &-logo {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 2em auto;
    color: @text-color-highlight;
  }

  &-title {
    font-size: 1.4em;
    text-align: center;
    line-height: 1.3;
    margin: 1em 0;
  }

  &-panel {
  }

  &-card {
    margin: 1em 0;

    border-radius: @component-border-radius*2;
    border: 1px solid @base-border-color;
    background-color: lighten(@base-background-color, 3%);
  }

  &-summary {
    padding: 1em 1.5em;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.2;
    cursor: pointer;
    &:hover {
      color: lighten(@text-color, 4%);
    }
    &::-webkit-details-marker {
      display: none
    }
    &:before {
      width: 20px;
      color: @text-color-subtle;
      details[open] & {
        color: @text-color-highlight;
      }
    }
    details[open] & {
      color: @text-color-highlight;
    }
  }

  &-highlight {
    color: @text-color-highlight;
  }

  &-detail {
    border-top: 1px solid @base-border-color;
    padding: 1.5em;
    .welcome-note {
      margin-bottom: 0;
    }
  }

  &-img {
    display: block;
    max-width: 100%;
    border-radius: 3px;
    margin: 0 0 1em 0;
    border: 1px solid @base-border-color;
  }

  &-key {
    display: inline-block;
    padding: .3em .4em;
    font-size: .8em;
    line-height: 1;
    border-radius: 3px;
    color: @text-color-highlight;
    border: 1px solid @text-color-subtle;
    background: hsla(0,0%,0%,.1);
  }

  &-note {
    font-size: .86em;
    color: @text-color-subtle;
  }

  &-metrics {
    margin-top: 2em;
  }

  &-footer {
    text-align: center;
  }

}
