@import "./colors.scss";

@import "../components/Component/styles/header.scss";

html,
body {
  min-height: 100%;
  font-size: 14px;
  color: $color-footer;
}

.fixedTop {
  margin-top: 75px;
  overflow-x: hidden;
  height: calc(100vh - 135px); // 75px header and 60px footer
  position: relative;
}

footer[data-test="presentation-common-footer"] {
  position: fixed;
  bottom: 0;
}

/*
 Backgrounds
------------- */
body {
  background-image: url("./assets/gray-leather-background.jpg");
  background-color: $color-grey;
  background-size: cover;
  .App {
    .switch {
      background-color: $color-white-masked;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 100%
      );
    }
  }
}

/*
 General
--------- */

.container_xxl {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}

.container_max {
  width: 100%;
  max-width: 100%;
  margin: 0px;
}

.border_top {
  border-top: 1px solid $color-main;
}

.border_bottom {
  border-bottom: 1px solid $color-main;
}

.tall {
  height: 100%;
}

.text_small {
  font-size: 0.7em;
  line-height: 0.7em;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

.link_icon {
  width: 20px;
  text-align: center;
}

.clickable {
  cursor: pointer;
  &:hover {
    opacity: 0.7;
  }
}

.no_border {
  div,
  div * {
    &::before {
      border-color: transparent;
    }
    &::after {
      border-color: transparent;
    }
  }
}

.horizontal-center {
  display: flex;
  justify-content: center;
}

.shadow {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

a {
  color: $color-warning;
  &:hover {
    color: $color-warning;
    text-decoration: none;
  }
}

/*
 Buttons
--------- */

.btn {
  border-color: transparent;
  color: $color-white !important;
  font-size: inherit;
  text-transform: initial;

  &:hover {
    border-color: transparent;
    color: $color-white !important;
    opacity: 0.7;
  }

  &.btn-prime {
    background-color: $color-prime !important;
    background: linear-gradient(
      135deg,
      $color-prime 0%,
      $color-prime-masked 100%
    ) !important;
    color: $color-prime-text !important;
    &:hover {
      color: $color-prime-text !important;
    }
  }

  &.btn-main {
    background-color: $color-main;
    background: linear-gradient(
      135deg,
      $color-main 0%,
      $color-main-masked 100%
    );
    color: $color-main-text !important;
    &:hover {
      color: $color-main-text !important;
    }
  }

  &.btn-info {
    background-color: $color-info;
    background: linear-gradient(
      135deg,
      $color-info 0%,
      $color-info-masked 100%
    );
    color: $color-info-text !important;
    &:hover {
      color: $color-info-text !important;
    }
  }

  &.btn-warning {
    background-color: $color-warning;
    background: linear-gradient(
      135deg,
      $color-warning 0%,
      $color-warning-masked 100%
    );
    color: $color-warning-text !important;
    &:hover {
      color: $color-warning-text !important;
    }
  }

  &.btn-light {
    color: $color-main;
  }

  &.btn-light-alt {
    color: $color-white;
  }

  &.disabled,
  &:disabled {
    background-color: $color-grey;
  }

  &.btn-pill {
    border-radius: 10px;
  }

  &.nopadding {
    margin: 0;
    padding: 0 2px 0 2px;
    min-width: initial;
    width: initial;
    min-height: initial;
  }

  span.far,
  span.fas {
    margin-top: -3px;
  }
}

/* 
 Forms
------- */

fieldset {
  border: 1px solid $color-menu;
  min-width: initial;
  padding: 0.5rem;
  margin: initial;
  legend {
    width: initial;
    max-width: initial;
    padding: initial;
    font-size: initial;
    font-weight: bold;
  }
  .group-info-field {
    label {
      text-align: right;
    }
  }
}

.group-info-field {
  margin-bottom: 0.25rem;
  label {
    font-weight: bold;
  }
  &:not(.show-disabled) {
    input[disabled],
    select[disabled],
    button[disabled] {
      background-color: $color-transparent;
      border-color: $color-transparent;
      color: $color-black;
      /* for Firefox */
      -moz-appearance: none;
      /* for Chrome */
      -webkit-appearance: none;
    }
    select[disabled]::-ms-expand {
      display: none;
    }
  }
}

.form-group {
  &.fieldset {
    border: 1px solid rgba(25, 58, 74, 0.1);
    margin-left: -5px;
    padding-left: 5px;
    max-width: 100%;
    background-color: $color-white-masked;
    border-radius: 4px;
    //Material-UI 'Paper' effect
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
      0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    * {
      margin-right: 0px;
    }
    legend {
      width: initial;
      max-width: initial;
      line-height: 1;
      font-size: 0.95rem;
      align-self: center;
      font-weight: bold;
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  .input-group-prepend {
    .input-group-text {
      padding: 0.375rem 0.25rem;
    }
  }
  .input-group-append {
    .input-group-text {
      padding: 0.375rem 0.25rem;
    }
  }
  .btn {
    min-height: 33.5px;
  }
}

.required {
  input,
  select,
  textarea {
    background-color: $color-highlight;
    &.empty {
      border-color: $color-error;
    }
  }
}

.validation-error {
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
}

.form-group {
  div[class$="-container"] {
    width: 100%;
  }
}

/* 
 DatePicker
----------- */

.react-datepicker-wrapper {
  width: 100%;
  input {
    width: 100%;
  }
  .date-picker-custom {
    border: 1px solid $color-grey;
    font-size: 1rem;
    background-color: $color-white;
    z-index: 10;
    overflow: visible;
  }

  .date-picker-custom-disabled {
    border: 1px solid $color-white;
    font-size: 1rem;
    background-color: $color-white;
  }

  .date-time-picker-custom {
    border: 1px solid $color-grey;
    font-size: 1rem;
    background-color: $color-white;
  }
  .date-time-picker-custom-disabled {
    border: 1px solid $color-white;
    font-size: 1rem;
    background-color: $color-white;
    margin-top: 0.25rem;
  }
  .disabled {
    background-color: $color-grey;
  }
}

.react-datepicker-popper {
  .custom-wide-popper {
    width: 287px;
    right: 55px;
    .react-datepicker__month-container {
      width: 199px;
    }
  }
}

/* 
 Snackbar
---------- */

.custom-snackbar {
  &.success > div {
    background-color: $color-prime;
    background: linear-gradient(
      135deg,
      $color-prime 0%,
      $color-prime-masked 100%
    );
  }
  &.info > div {
    background-color: $color-main;
    background: linear-gradient(
      135deg,
      $color-main 0%,
      $color-main-masked 100%
    );
  }
  &.warning > div {
    background-color: $color-info;
    background: linear-gradient(
      135deg,
      $color-info 0%,
      $color-info-masked 100%
    );
    color: $color-black;
  }
  &.error > div {
    background-color: $color-warning;
    background: linear-gradient(
      135deg,
      $color-warning 0%,
      $color-warning-masked 100%
    );
    color: $color-white;
  }
}

/*
 Alerts
--------*/

.alert-warning {
  background-color: $color-highlight;
  background: linear-gradient(
    135deg,
    $color-highlight 0%,
    $color-highlight-masked 100%
  ) !important;
  color: $color-main;
}

/*
 Collapse
------------*/

.rc-collapse {
  border: none;
  background-color: transparent;
  .rc-collapse-item,
  .rc-collapse-item-active {
    border: none;
    .custom-collapse-header {
      display: none;
    }
    .rc-collapse-header {
      background-color: $color-main-masked;
      color: $color-white;
    }
    .rc-collapse-content {
      color: #212529;
      padding: 0 0 0 5px;
      margin: 0 0 0 -5px;
      background-color: transparent;
    }
    &.searchCriteria {
      .rc-collapse-content {
        padding: 0 0 0 5px;
      }
    }
    &.searchCriteria_inModal {
      .rc-collapse-content {
        padding: 0 12px 0 12px;
      }
    }
  }
  &.showOverflow {
    .rc-collapse-item {
      .rc-collapse-content {
        overflow: visible;
      }
    }
  }
}

/*
 Tables
------------*/

table {
  th,
  tr {
    padding: 0;
    height: initial;
  }
  tbody {
    tr {
      cursor: pointer;
      &:hover {
        background-color: $color-highlight;
        background: linear-gradient(
          135deg,
          $color-highlight 0%,
          $color-highlight-masked 100%
        ) !important;
      }
    }
  }
}