.selector {
  .selector_main {
    border: 1px solid #ccc;
    position: relative;

    .selector_main_title {
      padding: 5px 10px;
    }
    
    .selector_arrow {
      height: 2em;
      width: 10px;
      position: absolute;
      top: 1px;
      right: 10px;
      cursor: pointer;

      &:after { 
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #ccc;
      }
    }
  }

  .selector_items {
    border: 1px solid #cCC;
    position: absolute;
    width: 100%;
    margin-top: -1px;
    background-color: white;

    .selector_item {
      padding-left: 10px;
      padding-right: 10px;
      border-bottom: 1px solid #CCC;
      padding-top: 2px;
      padding-bottom: 2px;

      &.selected {
        &:after {
          content: "✓";
          display: inline-block;
          position: absolute;
          right: 10px;
          top: 50%;
        }
      }
      &:hover {
        background-color: #eee;
        cursor: pointer;
      }
    }
  }

  &.selector_close {
    .selector_items {
      display: none;
    }
  }
}