@import "../helpers/index.scss";

html {
  overflow: hidden;
}

body {
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", sans-serif !important;
  background-color: $grey-lightest-clr !important;
}

//main-layout-styles
.cm-admin {
  display: flex;
  width: 100%;
  height: 100%;

  .panel-area {
    width: calc(100% - 225px);
    margin-left: 225px;
    height: 100vh;
    overflow-y: auto;
  }

  .components {
    margin-top: 140px;
    padding: 10px 30px;
    .field-container {
      max-width: 400px;
    }
  }
}

a:hover,
a {
  text-decoration: none !important;
}

// daterangepicker theme styles
.daterangepicker {
  .active {
    background-color: $brand-color !important;
  }
  .drp-buttons {
    .btn-primary {
      background-color: $brand-color !important;
    }
  }
}

// datepicker theme styles
.datepicker {
  .active {
    background-color: $brand-color !important;
  }
}

.opacity-1 {
  opacity: 1 !important;
}

.cm-page-container {
  height: 100vh;
}

.sticky-container {
  position: sticky;
  top: 0;
  background-color: $white;
  z-index: 5;
}

.scrollable {
  overflow: auto;
}

// TODO: Check and remove the input-wrapper styles later
.input-wrapper {
  margin-bottom: 24px;
  input,
  select,
  .select2 {
    width: 320px;
  }
  textarea {
    width: 480px;
  }
}

// TODO: Check and remove the input-wrapper styles later
.input-wrapper.disabled {
  input:disabled {
    background-color: $grey-lightest-clr;
  }
  label {
    color: $ink-lightest-clr;
  }
}

.nested-fields .select2 {
  width: 320px !important;
}

.datetime-wrapper {
  position: relative;
}

.cm-admin-static {
  width: auto;
  text-align: center;
  padding: 0 15px;
}

.date-filter-wrapper {
  position: absolute;
  line-height: 28px;
  top: 0;
  opacity: 0;
  z-index: -1;
}

//select 2 styles
.select2-container {
  .selection {
    .select2-selection {
      padding: 8px 16px;
      background-color: $white;
      border: 1px solid $grey-light-clr;
      border-radius: $radius-4;
      height: 40px;
      .select2-selection__rendered {
        padding-left: 0;
        @include font($size: $t4-text, $color: $primary-text-clr);
        line-height: 22px;
      }
      .select2-selection__arrow {
        top: 6px;
      }
    }
  }
  .select2-dropdown {
    border: 1px solid $grey-lighter-clr;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
    border-radius: $radius-4;
    .select2-results {
      .select2-results__options {
        .select2-results__option {
          padding: 9px 16px;
          @include font($size: $t4-text, $color: $primary-text-clr);
          line-height: 22px;
        }
      }
      .select2-results__option--highlighted.select2-results__option--selectable {
        background: $grey-lighter-clr;
        color: $primary-text-clr;
      }
      .select2-results__option--selected {
        color: $brand-color !important;
        background-color: $grey-lighter-clr !important;
      }
    }
  }
}