/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure 
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/

@import 'node_modules/carbon-components/scss/globals/scss/_vars';
@import 'node_modules/carbon-components/scss/globals/scss/_colors';

.modal-with-editor-and-list {
  .bx--modal-container {
    min-width: 35rem;
  }

  .bx--modal-header {
    border-bottom: 1px solid $color__gray-1;
    padding-bottom: 1rem;
  }

  .modal-table-content {
    max-height: 25rem;
    overflow-y: auto;

    .field-row {
      margin: 0.4rem;
      border-bottom: 1px solid $color__gray-1;
      padding-bottom: 0.4rem;
      p {
        display: inline;
      }
      div {
        float: right;
        .secondary-text-field {
          font-size: 0.75rem;
          padding: 0.2rem;
          font-weight: bold;
          vertical-align: bottom;
        }
        svg {
          min-width: 1.3rem;
          right: 2rem;
          fill: $color__navy-gray-7;
          margin-top: 0.2rem;
        }
        .undo-button {
          height: 1rem;
          min-width: 1.3rem;
          right: 2rem;
          margin-top: 0.2rem;
        }
      }
    }
  }

  .text-input-field-row {
    margin-left: 1px;
    .text-input-field-row-header {
      font-weight: bold;
      font-size: 0.75rem;
    }

    .text-input-container {

      p {
        display: inline-block;
        margin: 0 0.5rem;
      }

      .text-input-box-container {
        position: relative;
        display: inline-block;
        width: 43%;
        div {
          width: 100%;
        }
      }

      div {
        display: inline-block;
        div {
          z-index: 100;
          input {
            height: 2rem;
            font-family: "Red Hat Text Regular", Helvetica Neue, Arial, sans-serif;
            font-size: 0.875rem;
            display: block;
            width: 100%;
            min-width: 10rem;
            padding: 0 1rem;
            color: $color__blue-90;
            background-color: rgba(61, 112, 178, 0.1);
            border: 1px solid transparent;
          }
          .text-input-container-list-box__menu {
            z-index: 200;
            background: $color__white;
            position: absolute;
            width: 100%;
            box-shadow: 0 3px 3px 0 $color__navy-gray-8;
            .text-input-container__menu-item {
              display: flex;
              align-items: center;
              height: 2.5rem;
              padding: 0 1rem;
              cursor: pointer;
              user-select: none;

              &:hover,
              &--highlighted {
                outline: 1px solid transparent;
                text-decoration: underline;
                color: $color__blue-90;
                background-color: rgba(61, 112, 178, 0.1);
              }
            }
          }
        }

        p {
          display: inline-block;
          margin: 0 0.5rem;
        }
      }

      svg {
        display: inline-block;
        margin: 0 0.4rem;
        fill: $color__navy-gray-7;
        min-width: 1.6rem;
      }
    }
  }

  .bx--toolbar-search-container {
    margin-top: 1rem;
    border-bottom: 2px solid $color__blue-51;
    margin-left: 1px;
    margin-right: 1px;
  }
}
