/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2017, 2019. All Rights Reserved.
 * Copyright (c) 2020 Red Hat, Inc.
 *
 * Note to U.S. Government Users Restricted Rights:
 * Use, duplication or disclosure restricted by GSA ADP Schedule
 * Contract with IBM Corp.
 *******************************************************************************/
 /* Copyright (c) 2020 Red Hat, Inc. */
@import 'node_modules/carbon-components/scss/globals/scss/_colors';

.editor-bar {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: space-between;
      
    .editor-bar-title {
      padding-left: 12px;
    }
    
    .editor-bar-toolbar {
      display: flex;
      height: 100%;

      .editor-bar-section {
        display: flex;
        padding: 0 10px;
        border-left: 1px solid #55585C;
        height: 100%;
        align-items: center;
  
        > div {
          display: flex;
          align-items: center;
          height: 100%;
          padding: 0 6px;
        }
      
        &:last-of-type {
          padding: 0;
        }
      
      }
    }

    .editor-bar-search {
      > div {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 6px;
      }
    
    
      .bx--search--sm {
        svg.bx--search-magnifier {
          fill: gray;
        }
      }

      .bx--search--sm .bx--search-input {
        color: white;
        background-color: #414141;
        font-size: 0.875rem;
        height: 1.375rem;
        &:focus {
          box-shadow: none;
          border: none;
        }
        &::placeholder { 
          color: white;
          opacity: .5;
        }      
      }
    }

    .editor-bar-button {
      padding: 0.125rem;
      cursor: pointer;

      svg {
        width: 20px;
        height: 20px;
        fill: white;
      }

      &:focus {
        box-shadow: none;
        outline: none;
        border: none;
     }

      &.disabled {
        opacity: 0.4;
        cursor: default;
      }

      &.failure {
        cursor: default;
        fill: red;
      }
    }

    .editor-error-button {
      fill: red;
    }

    .editor-bar-spacer {
      width: 1rem;
      height: 1rem;
    }

}

.editor-error-button-item {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem;
  width: 100%;
  max-width: none;

  .item-container {
    display: flex;

    .item-icon {
      fill: red;
      padding-right: 0.5rem;
    }
  }
}
