// 셀렉트 삼각형을 위해 둘러싸는 SelectBox
// before로 삼각형 아이콘 제작
// 아이콘 위에서의 이벤트 씹힘 방지를 위해 z-index를 -1로 처리
.SelectBox {
  background: $color-gray100;
  position: relative;
  width: 100%;
  z-index: 0;

  &::before {
    border-color: $color-gray800 transparent transparent;
    border-style: solid;
    border-width: 7px 5px 0;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 10px;
    top: 13px;
    width: 0;
    z-index: -1;
  }
}



.SelectBox__select {
  background: none;
  border: 1px solid $color-gray350;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px $color-black-opacity075;
  color: $global-text-color;
  height: 32px;
  padding: 6px 24px 6px 12px;
  width: 100%;

  &:disabled {
    background: $color-gray50;
    border: 1px solid $color-gray300;
    box-shadow: none;
    color: $color-gray500;
  }
}

// 유효성에 걸린 select box
// -----------------------------------
.SelectBox--invalid {

  .SelectBox__select {
    border: 1px solid $color-red;
  }
}

// 테마
// -----------------------------------

// 내문서 툴바 테마
.SelectBox--theme-document-list-tool-bar {

  .SelectBox__select {
    border-radius: 4px;
  }
}

// 에디터 테마
.SelectBox--theme-editor {

  .SelectBox__select {
    background: $color-gray50;
    border: 1px solid $color-gray300;
  }
}
