@import "../../../../../assets/styles/index.scss";

@import "../../styles/scrollbar.scss";

$width: 100%;

.btn-group {
  width: $width;

  .dropdown-toggle {
    width: $width;
  }
  button {
    @include border("all", 1px, solid, $color-light-gray1);
    @include border-radius(0);
    @include rem("padding", 6px 12px);
    @include rem("font-size", 16px);
    line-height: 1.5;
    color: $color-dark-gray6;
    background-color: $color-white;
    background-clip: padding-box;
    text-align: left;
    text-transform: none;
  }

  button::after {
    float: right;
    @include rem("margin-top", 10px);
  }

  .dropdown-menu {
    @include rem("min-width", 0);
    width: 100%;
    border: none;
    @include rem("padding-top", 0);
    @include rem("padding-bottom", 0);
    @include border-radius(0);
    background-color: $color-dark-gray1;
    @include rem("margin", 0 20px 0 0);
    @include rem("max-height", 300px);
    overflow-y: auto;
    .dropdown-item {
      @include rem("min-height", 40px);
      @include rem("margin-top", 2px);
      color: $color-white;
      @include rem("padding", 8px 24px);
      &:hover {
        color: $color-dark-gray6;
        cursor: pointer;
      }
      &:active {
        color: $color-white;
        background: $color-dark-gray6;
        border: none;
      }
      &:focus {
        outline: none;
      }
    }

    .dropdown-divider {
      @include rem("margin", 0);
      @include border(top, 1px, solid, $color-dark-gray2);
    }
  }
}

.select-div {
  max-height:50px;
  select {
    width: $width;
    @include rem("min-height", 52px);
    @include rem("padding-left", 5px);
    font-family: "DaimlerCS", sans-serif;
    @include rem("font-size", 18px);
    color: $color-dark-gray6;
    background-color: $color-white;
    background-clip: padding-box;
    position: relative;
    text-transform: none;
    overflow-y: auto;
  }
}

.error-holder {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  .align-position {
    position: initial;
    text-transform: none;
  }
}

.custom-error {
  color: red;
  padding-top: 5px;
}
