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

.search-options{
  width: 390px;

  table{
    border-collapse: collapse;
    width: 100%;

    tr{
      border-bottom: solid 0.5px #c8c8ca;

      &:last-child{
        border-bottom: none;
        text-align: center;
      }
    }

    .search-options-label{
      font-size: 12px;
      font-weight: 500;
      margin-left: 18px;
      text-transform: capitalize;
    }
  
    select{
      margin: 9px 0;
      width: 147px;
    }
  
    input[type="text"]{
      border: none;
      font-size: 12px;
      height: 26px;
      outline: none;
      width: 100%;

      &::placeholder {
        text-transform: initial;
      }
    }

    .checkmark-container{
      float: left;
      margin: 28px 50px 0 50px;
      width: 120px;

      .checkmark-checked::after {
        top: 2px;
      }

      .checkmark-text{
        font-size: 12px;
        font-weight: 500;
      }
    }
  
    .button-search {
      background-color: #0091ff;
      color: white;
      height: 27px;
      margin: 23px;
      text-align: left;

      i{
        color: white;
        font-size: 14px;
        margin: 1 6px;
        top: 3px;
      }

      span{
        font-size: 11px;
        font-weight: 500;
        margin-right: 10px;
        top: 0px;
      }
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BORDER_COLOR_SEARCH_OPTION, $_COLOR_TEXT_SEARCH_OPTION){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .search-options{
      table{
        tr{
          border-bottom-color: $_BORDER_COLOR_SEARCH_OPTION;
        }

        .search-options-label {
          color: $_COLOR_TEXT_SEARCH_OPTION;
        }

        .search-options-input {
          color: $_COLOR_TEXT_SEARCH_OPTION;
          font-weight: 300;
          &::placeholder {
            color: $_COLOR_TEXT_SEARCH_OPTION;
            font-weight: 100;
          }
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BORDER_COLOR_SEARCH_OPTION_LIGHT, $_COLOR_TEXT_SEARCH_OPTION_LIGHT);
@include themable($_THEME_DARK, $_BORDER_COLOR_SEARCH_OPTION_DARK, $_COLOR_TEXT_SEARCH_OPTION_DARK);