@import (reference) url('../Dropdown.less');

.graphql-rest-mapping-frame > .Widget > .widget-contentCreate,
.graphql-rest-mapping-frame > .Widget > .widgetControls,
.graphql-rest-mapping-frame > .Widget .icon-action-trash {
  display: none;
}

.frame[name='GraphQL-rest-frame'] {
  padding: 0;
}

/* Supports richer dynamic notes */
[data-type='com.psddev.graphql.gca.editorial.EditorialGCASchemaSettings']
  .CIG-noteItem,
[data-type='com.psddev.graphql.rest.GraphQLRestMappingApiEndpoint']
  .CIG-noteItem {
  b,
  strong {
    font-weight: bold;
  }

  code {
    background-color: var(--color-gray1);
    font-family: monospace;
  }

  ul {
    list-style: disc;
    padding-left: 18px;
  }
}

.GraphQL {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow: hidden;
  width: 100%;

  &-widget {
    height: 100%;
    padding: 0;
  }

  &-controls {
    align-items: center;
    display: flex;
    padding: 10px;

    > * {
      flex-shrink: 0;
      margin-right: var(--gap-m);
    }

    &-toggle {
      .IconButton;

      --IconButton-name: 'settings';
    }

    &-list {
      .Dropdown;

      & li {
        .Dropdown-item;
      }

      & a {
        display: block;
      }
    }

    &-menu {
      margin-left: auto;

      &.is-open {
        .GraphQL-controls-toggle {
          &:hover,
          &:focus {
            --IconButton-name: 'close';
          }
        }

        .GraphQL-controls-list {
          .Dropdown.is-open;
        }
      }
    }
  }

  &-form {
    max-width: 30vw;
    width: 100%;

    .ComboInput {
      max-width: 30vw;
    }
  }

  &-frame {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
  }

  &-printed-schema {
    font-family: monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  &-clear-button {
    .IconButton;

    --IconButton-name: 'clear';

    color: var(--color-red6);
    margin-left: calc(-1 * var(--gap-m));

    &:hover {
      &::before {
        color: var(--color-red6);
      }

      &::after {
        background: var(--color-red6);
      }
    }
  }

  &-options-button-icon {
    .IconButton;

    --IconButton-name: 'edit';
  }

  &-options-page .ActionBar button[name='action-delete'] {
    display: none;
  }

  &-copy-container {
    display: inline;
  }

  &-copy-confirmation {
    font-weight: bold;
  }

  &-copy {
    .IconButton;

    --IconButton-name: 'assignment';

    &[data-copied] {
      --IconButton-name: 'done';
    }
  }

  &-open {
    .IconButton;

    --IconButton-name: 'open_in_new';
  }

  &-hidden {
    display: none;
  }
}
