/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/icons/variables";
@import "~@bentley/ui-core/lib/ui-core/inputs/variables";
@import "~@bentley/ui-core/lib/ui-core/style/baseline";
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";

.components-popup-button {
  min-width:          100%;
  min-height:         23px;
  height:             100%;
  margin:             0;
  padding:            0;
  background-color:   $buic-background-control;
  border:             1px solid $buic-inputs-border;
  border-radius:      $uicore-border-radius;
  box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;
  box-sizing:         border-box;
  cursor:             pointer;

  display:            flex;
  flex-shrink:        1;
  align-items:        center;

  font-weight:        normal;

  > .components-popup-button-value {
    flex-grow:        1;
    max-width:        calc(100% - #{$uicore-line-height});
    overflow-x:       hidden;
    padding:          0 3px;

    &.components-popup-button-placeholder {
      color:          $buic-foreground-disabled;
    }
  }

  > .components-popup-button-arrow {
    background-color: $buic-background-control;
    width:            $uicore-line-height;
    height:           $uicore-line-height;

    > .components-popup-button-arrow-icon {
      transition: transform .2s;

      &:hover {
        color: $buic-foreground-primary;
      }

      text-align: center;
      font-size: $uicore-icons-x-small;
      line-height: $uicore-line-height;
    }
  }

  &:focus, &.components-popup-expanded {
    border-color: $buic-foreground-focus;
    outline: 0px;
    box-shadow: $uicore-inputs-focus-gradient;

    > .components-popup-button-arrow {
      border: none;
      box-shadow: none;
      outline: 0px;

      > .components-popup-button-arrow-icon {
        color: $buic-foreground-primary;
      }
    }
  }

}

.components-popup-button-popup {
  background-color:   $buic-background-dialog;
}

.components-editor-popup-content {
  padding:            4px 8px;
}

.components-popup-bottom-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;

  >.components-popup-large-button {
    width: 70px;
    font-size: 20px;
    margin-left:  6px;
  }

  >.components-popup-cancel-button {
    &, &:active, &:focus {
      border:             none;
      background-color:   $uicore-gray;
      color:              $uicore-white;
    }

    &:hover {
      background-color:   $uicore-gray-5;
      color:              $uicore-white;
    }

  }
}