@use "variables" as *;

// grapesjs-style-bg
@use "grapick/dist/grapick.min.css";

// grapesjs-style-border
@mixin square-borders-before {
  display: block;
  content: '' !important;
  border: 2px solid $tertiaryColor;
  width: 10px;
  height: 10px;
  margin: auto;
}
.fa-arrows::before {
  @include square-borders-before;
  border-color: $secondaryColor;
}
.fa-long-arrow-up::before {
  @include square-borders-before;
  border-top-color: $secondaryColor;
}
.fa-long-arrow-down::before {
  @include square-borders-before;
  border-bottom-color: $secondaryColor;
}
.fa-long-arrow-left::before {
  @include square-borders-before;
  border-left-color: $secondaryColor;
}
.fa-long-arrow-right::before {
  @include square-borders-before;
  border-right-color: $secondaryColor;
}

// grapesjs-notifications
.gjs-editor .gjs-notification {
  max-height: initial;
  text-align: left;
}
.gjs-editor .gjs-notification,
.gjs-editor .gjs-notification .gjs-sm-header,
.gjs-editor .gjs-notification .gjs-notification__item,
.gjs-editor .gjs-notification .gjs-notification__group > details,
.gjs-editor .gjs-notification .gjs-notification__group > details > ul,
.gjs-editor .gjs-notification .gjs-notification__group > details > summary,
.gjs-editor .gjs-notification .gjs-notification__group {
  padding: 0;
  margin: 0;
}
.gjs-editor .gjs-notification .gjs-notification__group,
.gjs-editor .gjs-notification .gjs-notification__item {
  margin: 10px 0;
  padding: 10px 0;
}

.gjs-editor .gjs-notification .gjs-notification__group .gjs-notification__item {
  margin-left: 10px;
}

// publication-ui
@keyframes pub-blink {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

#publish-dialog {
  .notice {
    margin: 10px 0;
    background-color: rgba(255, 166, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
  }

  progress {
    width: 100%;
    border-radius: 50px;
    border: none;
    height: 5px;
    animation: pub-blink 0.33s infinite alternate;
    background-color: $tertiaryColor;
  }

  progress::-webkit-progress-bar {
    background-color: $tertiaryColor;
  }

  progress::-moz-progress-bar {
    background-color: $tertiaryColor;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.95rem;
    transition: 200ms;

    svg {
      width: 1.4rem;
      vertical-align: middle;
      margin-right: 5px;
    }

    button {
      border: solid 2px #484848;
      border-radius: 50px;
      padding: 4px 9px;
      background-color: #444;
      color: $secondaryColor;
    }

    .connector {
      color: $quaternaryColor;
    }
  }

  main {
    max-height: none;

    .buttons {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-row-gap: 0.5rem;
      transition: 200ms;
    }

    svg {
      height: 0.9rem;
      margin-left: 5px;
    }

    h3 {
      margin: 0;
    }

    p {
      margin-top: 0;
    }

    details {
      border-radius: 5px;
      border: solid #222 2px;
      background-color: #222;
      margin: 10px 0;
      padding: 10px;
      word-break: break-word;
      overflow-y: auto;
      max-height: 200px;
      position: relative;

      pre {
        word-break: break-word;
      }

      summary {
        font-size: 0.95rem;
        opacity: 0.7;
      }

      .logs {
        font-family: monospace;

        * {
          margin: 0;
          padding-top: 3px;
          padding-bottom: 3px;
          border-radius: 5px;
          list-style: '-';

          &:hover {
            transition: 200ms;
            background-color: rgba(255, 255, 255, 0.05);
          }
        }
      }

      &:hover {
        transition: 200ms;
        border-color: $lighterPrimaryColor;
        background-color: $darkerPrimaryColor;
      }

      * {
        transition: 200ms;
      }
    }

    details[open] summary {
      margin-bottom: 10px;
    }

    .silex-button {
      padding: 10px;
      width: 100%;
      transition: 200ms;

      &:hover {
        filter: brightness(1.2);
      }

      &:active {
        filter: brightness(0.8);
      }
    }

    .silex-button--primary {
      background-color: $tertiaryColor;
    }
  }
}

// Adapting the layout of the suggestion list
.gjs-suggest {
  max-height: 30vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 7px;
  border-bottom: solid $primaryColor 7px;
}