@import '../../../../css/variables.less';
@brand-primary: @rsp-yellow;
@color-success:@rsp-green;
@color-disabled: #d7d7d7;
@light-grey:#eeeeee;
.rsssl_letsencrypt_container {
  margin-top:@big-margin;
  background-color: @grey-lighter;
  &.rsssl-progress-container {
    margin: 20px 0 0;
    padding: 10px 0;
    border-radius: 5px;
  }
}
.rsssl-dns-field {
  border: 1px solid @input-border-color;
  float: left;
  margin-bottom: 10px;
  width: 50%;
  padding: 10px;
  margin-left: 0;
  margin-top: 10px;
}
.rsssl-dns-label {
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 0;
  width:50%;
}
#rsssl-lets-encrypt ul {
  margin-left:50px;
  li {
    padding-right:10px;
    &:before {
      background-color: @grey-light;
      color: #fff;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      content: '';
      position: absolute;
      margin-top: 5px;
      margin-left: -30px;
    }

    &.rsssl-warning:before {
      background-color: @brand-primary;
    }

    &.rsssl-error:before {
      background-color: @color-warning;
    }

    &.rsssl-success:before {
      background-color: @color-success;
    }

    /*Nested li */
    ul li:before {
      background-color: @grey-dark;
      color: #fff;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      content: '';
      position: absolute;
      margin-top: 7px;
      margin-left: -19px;
    }
  }
}

//wordpress inserts notices after the first h1 or h2. To prevent breaking layout we insert an empty h1 tag at the start of our page, where WP can insert the notice.
.rsssl-notice-hook-element {
  display:none;
}

/*
    Hide nags from other plugins
*/
.error, .notice, .update-nag, .notice-info {
  &:not(.really-simple-plugins) {
    display: none !important;
  }
}

#rsssl-wizard {
  .rsssl-selectable {
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */
  }

  #rsssl-header {
    display: flex;
    justify-content: space-between;

    img {
      margin-left:@default-margin;
      width: 120px;
      height:28px;
    }

    padding: @default-padding;
    background-color: #fff;

    .rsssl-header-right {
      display: flex;
      align-items: center;
      a {
        margin-right: @default-margin;
      }
    }
  }

  #rsssl-content-area {
    margin: 10px;
  }
  .rsssl-section {
    .rsssl-success {
        &.check{
          margin-left:5px;
        }
    }
  }
  /**
  icons
   */
  .rsssl-icon {
    height:initial;
    &.rsssl-success {
      color:@color-success;
      svg {
        stroke:@color-success;;
        fill:@color-success;;
      }
      &.documents-shortcode {
        color:#000;
      }
    }
    &.rsssl-disabled {
      color:@color-disabled;
      svg {
        stroke:@color-disabled;;
        fill:@color-disabled;;
      }
    }

    &:hover {
      color: #000;
    }

    &.rsssl-bullet {
      height: 11px;
      width: 11px;
      margin-top:2px;
      &.rsssl-disabled {
        background-color: @color-disabled;
      }

      &.rsssl-success  {
        background-color: #27ADEA;
      }

    }

  }

}