// scss-lint:disable SelectorDepth NestingDepth ImportantRule

.label-templates-show {
  .title-row {
    height: unset !important;

    .label-template-icon {
      flex-shrink: 0;
      margin-bottom: auto;
      margin-right: 5px;
      margin-top: 13px;
      width: 32px;
    }

    .sci-inline-edit {
      @include font-h1;
      flex-grow: 1;
      max-width: calc(100% - 50px);
    }
  }

  .template-descripiton {
    @include font-button;
    margin: 1em 0;

    .title {
      font-weight: bold;
    }
  }

  .label-template-container {
    display: flex;

    .title {
      font-weight: bold;
    }

    .label-edit-header {
      align-items: center;
      display: flex;

      .title {
        margin-right: auto;
      }
    }

    .label-edit-container {
      flex-basis: 60%;
      padding-right: 1em;

      .button-container {
        display: flex;

        .refresh-preview {
          margin-right: auto;
        }

        .save-template {
          margin-left: .25em;
        }
      }
    }

    .label-preview-container {
      flex-basis: 40%;
      padding-left: 1em;
    }
  }

  .label-view-container {
    cursor: pointer;
    padding: .5em;
    position: relative;
    white-space: pre;

    .fa-pen {
      display: none;
      padding: 1em;
      position: absolute;
      right: 0;
      top: 0;
    }

    &:hover {
      background-color: $color-concrete;

      .fa-pen {
        display: inline-block;
      }
    }
  }

  .label-textarea {
    min-height: 240px;
    padding: .5em;
    width: 100%;
  }

  .inser-field-dropdown {
    .open-dropdown-button:not(.collapsed) {
      .fas {
        @include rotate(-180deg);
      }
    }

    .dropdown-menu {
      @include font-button;
      padding: 16px;
      width: 300px;
    }

    .search-container {
      margin-bottom: .25em;

      .close-dropdown {
        float: right;
      }
    }

    .fields-container {
      max-height: 40vh;
      overflow-y: auto;
    }

    .field-element {
      align-items: center;
      cursor: pointer;
      display: flex;
      padding: 10px 10px 10px 24px;

      .fas {
        @include font-main;
        display: none;
        margin-left: auto;
      }

      &:hover {
        background-color: $color-concrete;

        .fas {
          display: inline-block;
        }
      }
    }

    .block-title {
      @include font-small;
      align-items: center;
      color: $color-silver-chalice;
      display: flex;
      padding: 7px 8px;

      &::after {
        background-color: $color-silver-chalice;
        content: "";
        flex-grow: 1;
        height: 1px;
        margin-left: .25em;
        margin-top: 3px;
      }

      &::before {
        background-color: $color-silver-chalice;
        content: "";
        flex-basis: 5px;
        height: 1px;
        margin-right: .25em;
        margin-top: 3px;
      }
    }

    .no-results {
      color: $color-silver-chalice;
    }

    .tooltip-body {
      display: flex;
      width: 350px;

      .tooltip-inner {
        max-width: 350px;
        text-align: left;
      }
    }
  }
}