/*
 * Copyright 2023 Harness, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.labelModal {
  width: 890px;
  font-size: 24px;
  overflow-y: auto;
  padding: 32px 24px;
  :global(.bp3-dialog-header) {
    margin-bottom: 16px !important;
  }

  .modalForm {
    min-height: 556px !important;
    padding: 5px 25px 5px 5px !important;
  }

  // ToDo: this CSS is for scope box and can be uncommented once scope is implemented in Harness

  // .scopeBox {
  //   margin-top: 4px !important;
  //   border: 1px solid var(--grey-100);
  //   border-radius: 3px;
  //   display: flex;
  //   align-items: center;
  //   min-width: 50% !important;
  //   width: fit-content;
  //   padding: 2px !important;
  //   gap: 5px;

  //   .scopeTag {
  //     padding: 3px 6px !important;
  //     font-weight: 400 !important;
  //     font-size: 12px !important;
  //     font-family: var(--font-family-inter) !important;
  //     //   background-color: var(--grey-300) !important;
  //     background-color: var(--grey-100) !important;
  //     color: var(--primary-7) !important;
  //     border: none;
  //   }
  // }

  .labelDescription textarea {
    min-height: 64px !important;
  }
}

.popover {
  box-shadow: var(--elevation-4);
  border-radius: var(--spacing-2);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  margin-top: var(--spacing-xsmall);
}

:global {
  .bp3-menu {
    min-width: 108px !important;
  }
}

.colorMenu {
  :global {
    .bp3-menu-item:hover {
      background: var(--grey-50) !important;
      color: var(--grey-1000) !important;
    }
    .bp3-menu-item.bp3-active {
      background: var(--grey-100) !important;
      color: var(--grey-1000) !important;
    }
  }
}

.selectColor {
  box-shadow: none !important;
  background-color: var(--grey-0) !important;
  border: 1px solid var(--grey-100) !important;
  width: 108px;
  padding-right: 0 !important;
  padding-left: 15px !important;
}

.yellowContainer {
  background: var(--orange-50) !important;
  padding: var(--spacing-medium) var(--spacing-small);
  margin: 0 var(--spacing-large) 0 0 !important;
  border-radius: 4px;
  margin-bottom: 5px !important;
}
