@import '../../themes/dirigible/scss/abstracts/variables';
@import '../../themes/dirigible/scss/abstracts/icons';
@import '../../themes/dirigible/scss/abstracts/mixins';

#ds-editor-seo-preview .ds-seo-preview {
  span {
    display: block;
    font-style: normal;
    line-height: 1.33;
    &.title {
      margin-bottom: 4px;
      font-size: 15px;
      color: #1a0dab;
    }
    &.link {
      font-size: 11px;
      margin-bottom: 4px;
      color: #006621;
    }
    &.excerpt {
      font-size: 11px;
      margin-bottom: 0px;
      color: #545454;
    }
  }
}

.term-php #ds-editor-seo-preview {
  display: block;
  width: 200%;
  .ds-seo-preview {
    background: white;
    border-radius: 5px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
    margin-bottom: 32px;
    border: 1px solid rgba(0,0,0,.2);
  }
}



.dirigible-seo-page {
  $lt-gray : #2ecc71;
  $red: #e74c3c;
  h1 {
    margin-bottom: $u4;
    background: white;
    padding: $u4;
    line-height: 1;
    border-bottom: 1px solid rgba(0,0,0,.1);

    @include desktop {
      margin: -8px -19px 24px -20px;
    }
  }
  .dirigible-seo-tools {
    .tool {
      box-sizing: border-box;
      padding: $u4;
      background: #fff;;
      max-width: 400px;
      min-width: 100%;
      margin: 0px 1% 1% 0px;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,.1);
      @include break(700px) {
        min-width: 49%;
        max-width: none;
        width: 49%;
      }
      input {
        margin-bottom: 0px;
      }
      h3 {
        margin-top: 0px;
      }
    }
    .notification {
      margin-top: $u3;
      background: $lt-gray;
      border-radius: 3px;
      padding: $u2;
      color: #fff;
      h3 {
        margin-bottom: 4px;
        color: #fff;
      }
      p { margin: 0px;  }
      a { color: #fff !important; }
      &.error {
        border-left: 0px solid white;
        border: 1px solid darken($red, 10%);
        margin-bottom: 0px;
        background: $red;
      }
    }
  }
}