// Import any global variables from "../../../variables/*.scss"
@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";
@import "../../variables/fonts.scss";

.inputBox {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  width: 200px;
  height: 40px;
  padding-right: 16px;
  padding-bottom: 3px;
  border: 1px solid $gray300;
  border-radius: $borderRadiusBase;
  background-color: $white;
  cursor: text;
  font-family: $fontBase;
  font-variant-numeric: tabular-nums;
}

.inputBoxFocused { border-color: $blue; }

.inputBox input {
  flex-grow: 1;
  flex-shrink: 1;
  height: 40px;
  width: 100%;
  padding-top: 2px;
  margin-left: 16px;
  background-color: transparent;
  border: 0px;
  outline: none;
  font-family: $fontBase;
  font-variant-numeric: tabular-nums;
  font-size: $fontSizeBase;
  color: $gray700;

  &::placeholder {
    color: $gray400;
    opacity: 1; // Placeholders in firefox have opacity by default. Undo that.
  }
  &::-ms-input-placeholder { color: $gray400; }
  &:-ms-input-placeholder { color: $gray400; }
}

.inputBoxContainsLeftIcon { padding-left: 16px; }
.inputBoxContainsLeftIcon input { margin-left: 10px; }
.leftIcon {
  flex-grow: 0;
  flex-shrink: 0;
  padding-top: 2px;
}
.leftIcon svg {
  padding-top: 3px;

  *[fill-rule=nonzero] {
    fill: $gray400;
  }
}

.inputBoxContainsRightIcon { padding-right: 16px; }
.inputBoxContainsRightIcon input { margin-right: 10px; }
.rightIcon {
  flex-grow: 0;
  flex-shrink: 0;
  padding-top: 2px;
}
.rightIcon svg {
  padding-top: 3px;

  *[fill-rule=nonzero] {
    fill: $gray400;
  }
}

.inputBoxTextarea {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8.5px;
  padding-bottom: 17px;
  padding-left: 17px;
  padding-right: 17px;
  margin: 0;
  border: 1px solid $gray300;
  border-radius: $borderRadiusBase;
  background-color: $white;
  font-family: $fontBase;
  font-size: $fontSizeBase;
  resize: none;
  outline: none;

  &::placeholder {
    color: $gray400;
    opacity: 1; // Placeholders in firefox have opacity by default. Undo that.
  }
  &::-ms-input-placeholder { color: $gray400; }
  &:-ms-input-placeholder { color: $gray400; }
}
.inputBoxTextarea:focus { border-color: $blue; }
.inputBoxDisabled {
  border-color: $gray200;
  background-color: $gray200;
  cursor: not-allowed;

  &::placeholder {
    color: $gray400;
    opacity: 1; // Placeholders in firefox have opacity by default. Undo that.
  }
  &::-ms-input-placeholder { color: $gray400; }
  &:-ms-input-placeholder { color: $gray400; }
}


// Extract common styles into a placeholder selector for selectbox menu list and value
%inputBoxSelectCommon {
  font-family: $fontBase;

  width: calc(100% - 18px - 12px);

  background-color: $white;
  border: 1px solid $gray300;
  border-radius: 4px;

  padding-left: 17px;
  padding-right: 8px;

  user-select: none;
}

.inputBoxSelectBox {
  position: relative;
  width: 200px;
  box-sizing: border-box;

  font-weight: normal;
}

// Select box value - this is the always visible region that shows the currently selected item.
.inputBoxSelectBoxValue {
  @extend %inputBoxSelectCommon;
  height: (40px - 1px - 1px); // (for borders)

  font-size: $fontSizeBase;
  color: $gray700;

  display: flex;
  flex-direction: row;
  align-items: center;

  cursor: pointer;
  outline: none;

  & > span {
    margin-top: -2px;
    margin-right: auto;

    &:active {
      opacity: 0.9;
    }
  }
}
.inputBoxSelectBoxValueCaret {
  height: 100%;
  display: flex;
  align-items: center;

  svg *[fill-rule=nonzero] {
    fill: $gray700;
  }
}
.inputBoxSelectBoxValueOpened { border-color: $blue; }

// When disabled, a selectbox is grayed out and can't be clicked.
.inputBoxSelectBoxValueDisabled {
  background-color: $gray200;
  border-color: $gray200;
  pointer-events: none;
  cursor: not-allowed;
}

// Select box menu - this is the menu that is hidden and shown when the user clicks on the select
// box value.
.inputBoxSelectBoxMenu {
  @extend %inputBoxSelectCommon;

  box-sizing: border-box;
  position: absolute;
  top: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 0px;
  padding-right: 0px;

  width: 100%;

  z-index: 999999;
  color: $gray700;
  box-shadow: 0px 2px 4px $midnightOpaque10;
  transition: all 100ms ease-in-out;
  user-select: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  // When opened, fade in the select box and enable pointer events.
  // NOTE: when the select box is closed, it isn't given `display: none`, because giving it that
  // would make the animation difficult. Instead, it's given `pointer-events: none`, which causes
  // any clicks to not occur on that element and instead be handled by the element underneath it.
  opacity: 0;
  pointer-events: none;
}
.inputBoxSelectBoxMenuOpened {
  opacity: 1;
  pointer-events: all;
}
.inputBoxSelectBoxMenuAnchorLeft {
  left: 0;
}
.inputBoxSelectBoxMenuAnchorRight {
  right: 0;
}

.inputBoxSelectBoxMenuUl {
  list-style-type: none;
  padding-left: 0px;
  margin: 0px;
}

.inputBoxSelectBoxMenuLi {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding-left: 8px;
  padding-right: 8px;
  // padding-bottom: 1px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: $borderRadiusBase;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;

  &:focus {
    background-color: $gray100;
    color: $gray700;
    text-decoration: underline;
  }

  &:hover {
    background-color: $gray100;
    color: $gray700;
  }
}
.inputBoxSelectBoxMenuLiDisabled {
  color: $gray400;
  cursor: not-allowed;
  &:hover {
    color: $gray400;
    text-decoration: none;
    background-color: transparent;
  }
}

.inputBoxSelectBoxItemHighlight {
  margin-left: 10px;
  color: $gray400;
  font-style: italic;
}

.inputBoxSelectPlaceholder {
  color: $gray400;
}

.invalid { border-color: $red; }


// RULES FOR COMPACT_GRAY context
.contextCompactGray.inputBox {
  background: $gray200;
  border: 1px solid $gray200;
  width: 80px;
  height: 25px;
  padding-right: 8px;
  padding-top: 2px;
  
  & > input {
    height: 25px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: bold;
  }
}
.contextCompactGray.inputBox.inputBoxFocused {
  background: $blueLight;
  border: 1px solid $blue;

  & > input {
    color: $blue;
  }
}


// RULES FOR TIME_PICKER context
.contextTimePicker.inputBox {
  padding-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1;
}
.contextTimePicker.inputBoxSelectBoxValue {
  margin-left: -1px;
  padding: 0 8px;
  width: 24px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.contextTimePicker.inputBoxSelectBoxOpened {
  z-index: 1;
}
.contextTimePicker.inputBoxSelectBoxMenu {
  z-index: 2;
}

// RULES FOR LIST_VIEW CONTEXT
.contextListView.inputBoxSelectBoxValue {
  height: 36px;
  background: none;
  border: 1px solid transparent;
  font-size: 16px;
}
.contextListView.inputBoxSelectBoxValue.inputBoxSelectBoxValueOpened {
  border: 1px solid $blue;
}
.contextListView.inputBoxSelectBoxMenu {
  top: 41px;
}
.contextListView.inputBoxSelectBoxMenuLi {
  font-size: 16px;
}

// RULES FOR NAVBAR_INLINE CONTEXT
.contextNavbarInline.inputBoxSelectBoxValue {
  height: 30px;
  font-size: 16px;
}
.contextNavbarInline.inputBoxSelectBoxMenu {
  top: 36px;
}
.contextNavbarInline.inputBoxSelectBoxMenuLi {
  font-size: 16px;
}

// RULES FOR ANALYTICS_CONTROL_BAR CONTEXT
.contextAnalyticsControlBar.inputBoxSelectBoxValue {
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  color: $gray700;
  background: none;
  border: 1px solid transparent;
}
.contextAnalyticsControlBar.inputBoxSelectBoxValue.inputBoxSelectBoxValueOpened {
  border: 1px solid $blue;
}

// RULES FOR SPACE_DETAIL_CARD CONTEXT
.contextSpaceDetailCard.inputBoxSelectBox {
  width: auto;
  display: block;
}
.contextSpaceDetailCard.inputBoxSelectBoxValue {
  font-size: 12px;
  font-weight: bold;
  height: 13px;
  padding: 2px 3px;
  margin-left: -3px;
  margin-bottom: 1px;
  color: $midnightOpaque40;
  width: auto;
  border: none;
}
.contextSpaceDetailCard.inputBoxSelectBoxValue:hover,
.contextSpaceDetailCard.inputBoxSelectBoxValue:focus {
  background: $blueLight;
  color: $blue;
  & .inputBoxSelectPlaceholder {
    color: $blue;
  }
}
.contextSpaceDetailCard.inputBoxSelectBoxValue .inputBoxSelectBoxValueCaret {
  margin-left: 4px;
}
.contextSpaceDetailCard.inputBoxSelectBoxMenu {
  top: 20px;
  left: -3px;
  padding: 3px 0;
  width: auto;
}
.contextSpaceDetailCard.inputBoxSelectBoxMenuLi {
  margin: 0 2px;
  height: 24px;
  font-size: 12px;
  color: $gray600;
}
.contextSpaceDetailCard.inputBoxSelectBoxMenuLi.inputBoxSelectBoxMenuLiDisabled {
  color: $gray400;
}

// RULES FOR OPEN_AREA_APP_BAR CONTEXT
.contextOpenAreaAppBar.inputBoxSelectBoxValue {
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  border-color: $gray200;
}
.contextOpenAreaAppBar.inputBoxSelectBoxMenu {
  top: 36px;
  border-color: $gray200;
}
.contextOpenAreaAppBar.inputBoxSelectBoxMenuLi {
  height: 32px;
  font-size: 14px;
  font-weight: bold;
}