@import "~react-bootstrap-typeahead/css/Typeahead";
@import "~patternfly/dist/sass/patternfly/variables";

// breakpoints
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

// other colors
$color-widget-title-bg-color: #e0e0db;
$color-rating-filter-text-hover: #c45500;
$color-rating-selected: #dff3fe;
$color-rating-filter-star-empty: #979797;
$color-rating-filter-star-filled: #f1c857;
$color-icon-gray: #939597;
$color-dark-grey: #4D5258;
$color-dark-white: #D1D1D1;
$color-light-blue: #39A5DC;
$color-light-blue-2: #00A0DF;
$color-light-blue-hover: #0188bd;
$color-light-blue-active: #0176a4;
$color-black: #000000;
$color-white: #ffffff;
$color-sidebar-filter-bg-grey: #E7E7E7;
$color-sidebar-filter-border-grey: #DEDEDE;
$color-ecr-component-date: #00B9F7;
$color-ecr-component-text-grey: #828282;
$color-ecr-component-tab-bar-bg-grey: #D8D8D8;
$color-ecr-component-dark-grey: #4F4F4F;
$color-ecr-component-installed-button: #3F9C35;
$color-ecr-component-installed-button-border: #E0E0E0;
$color-ecr-component-inprogress-button: #f1c857;
$color-ecr-component-failed-button: #c45500;
$color-ecr-error-text: #A61302;
$color-ecr-list-icon-active: #363636;
$color-bundle-uninstall-error: #D30909;
$color-ecr-list-icon: #BBBBBB;
$color-ecr-component-border: #C3C3C3;
$color-vmenu-header-bg-grey: #1D1D1D;
$color-vmenu-header-text-grey: #c1c1c1;
$dark-color-separator: #aaabad;
$light-color-separator: #e5e5e5;
$color-row-selected: #def3ff;
$color-primary: #002F87;
$color-primary-dark: #032a73;
$color-published: #6CA100;
$color-unpublished: #A6A6A6;
$color-draft: #F0AB00;
$color-mid-blue: #0088CE;
$color-mid-green: #3BB800;
$color-mid-orange: #FCA907;
$color-mid-blue-semi: rgba(0,136,206,.6);
$color-row-selected: #def3ff;
$color-tour-primary: #00A0DF;
$color-border-gray: #BBBBBB;
$color-sidebar-dark-bg: #393F44;
$color-dragitem-bg: #292e34;
$color-transparent-black: rgba(0,0,0,.1);
$color-grey-background: #f5f5f5;
$color-grey-border: #dadada;
$color-light-grey-border: #E3E3E3;
$color-extra-light-grey-border: #F4F4F4;
$color-light-grey-background: #FAFAFA;
$color-extra-dark-grey: #1D1D1D;
$color-grey-description: #72767B;
$color-dump-table-code: #f4f5f7;

//FontAwesome icons
$fa-check: "\f00c";
$fa-exclamation: "\f12a";
$fa-spinner: "\f110";
$fa-ban: "\f05e";
$fa-adjust: "\f042";
$fa-sitemap: "\f0e8";
$fa-angle-right: "\f105";
$fa-angle-double-left: "\f100";
$fa-angle-double-right: "\f101";
$fa-times: "\f00d";
$fa-check-square: "\f14a";
$fa-check-square-o: "\f046";
$fa-square: "\f0c8";
$fa-square-o: "\f096";

// Bootstrap custom styles
// sass-lint:disable class-name-format
.btn-entando-apply,
.btn-entando-apply:hover,
.btn-entando-apply:focus {
  border-color: $color-pf-blue;
  background: $color-pf-black-200;
  color: $color-pf-blue;
  font-weight: normal;
}

.btn-entando-apply:hover,
.btn-entando-apply:focus {
  background: $color-pf-black-100;
}

.btn-transparent {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;

  &:hover,
  &:active {
    color: $color-pf-blue-300;
  }

  &:hover,
  &:active,
  &:disabled {
    background: transparent !important; // sass-lint:disable-line no-important
  }
}

.btn {
  padding: 2px 12px;
  border: 0 !important; // sass-lint:disable-line no-important
  background-image: none;
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus {
  background-color: $color-primary !important; // sass-lint:disable-line no-important
}

.btn-primary:hover {
  background-color: $color-primary;
}

.btn-primary:hover:active {
  background-color: $color-primary-dark !important; // sass-lint:disable-line no-important
}

.CodeMirror {
  border: 1px solid $color-pf-black-400;
}

.has-error {
  .CodeMirror,
  &.CodeMirror {
    border: 1px solid $color-pf-red;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px $color-pf-red-100;
  }
}

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.no-padding {
  padding: 0;
}

.shell-preload {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

// Use this on wrapper elements to make children's heights equal.
.equal {
  display: flex;
  flex-wrap: wrap;
}

// use this when removing body scrolls if you want to focus certain scroll event on an element
.no-scroll {
  overflow: hidden;
}

.scroll-overlay {
  margin-right: calc(-1 * (100vw - 100%));
  overflow-x: hidden;
}

.overflow-ellipsis {
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
}

// sass-lint:enable class-name-format
