.wp-tab-panel {
  max-height: none;
  padding   : 20px;
  overflow  : visible;

  input {
    margin-top: 5px;
  }

  p {
    margin: 5px 5px 0 0;
  }
}

.abc-select {

  cursor       : pointer;

  background   : #ffffff;

  font-weight  : 300;

  width        : calc(50% - 10px);
  margin-bottom: 20px;

  label {
    display      : block;
    margin-bottom: 10px;
  }

  &--multiple {
    width: 100%;
  }

  &__container {
    position: relative;
    z-index : 10;

    width   : calc(50% - 10px);

  }

  &__head {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;

    border         : solid 1px #cbd7e8;
    border-radius  : 0;

    padding        : 10px;

    max-width      : 75ch;
    overflow       : hidden;

    box-shadow     : 0 2px 4px 0 rgba(0, 67, 175, 0.1);
    background     : #ffffff;

    .isOpen & {
      border-bottom: 1px solid transparent;
    }

    &:after {
      content            : '';
      display            : block;

      width              : 12px;
      height             : 12px;

      background         : url('~@images/select.svg');
      background-position: center;
      background-size    : contain;
      background-repeat  : no-repeat;
    }

  }

  &__body {
    max-height    : 300px;

    background    : #ffffff;
    overflow      : auto;
    opacity       : 0;

    pointer-events: none;
    list-style    : none;

    position      : absolute;
    top           : 100%;
    left          : 0;

    border        : solid 1px #cbd7e8;
    border-top    : 0 solid transparent;

    transition    : height .4s ease;

    .isOpen & {
      opacity       : 1;
      pointer-events: auto;

      transition    : height .4s ease;
    }
  }

  &__item {
    padding   : 18px;

    min-height: 40px;

    position  : relative;

    &:last-child {
      border: none;
    }

    &[selected="selected"] {
      color: #e01747;

    }

    &:focus,
    &:hover {
      color     : #e01747;
      background: #fafafa;
    }
  }
}

.abc-select select {
  -webkit-appearance: none;
  max-width         : 100%;

  font-weight       : 300;

  padding           : 18px;

  display           : none;
}

.abc-select--multiple {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;

  .abc-select__container {
    width: calc(50% - 10px);
    order: 1;
  }

  .abc-select__results {
    width          : 50%;
    height         : fit-content;
    order          : 2;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
    align-items    : baseline;
    padding        : 10px;

    .abc-select__item {
      box-shadow    : 0 2px 4px 0 rgba(0, 67, 175, 0.1);
      background    : #ffffff;

      color         : #788EAD;
      position      : relative;

      padding       : 8px;
      margin-right  : 10px;

      overflow      : hidden;

      opacity       : 0;
      pointer-events: none;
      position      : absolute;

      &.isVisible {
        opacity       : 1;
        pointer-events: auto;
        position      : relative;
      }

      &:hover {
        color: #788EAD;

        &:after {
          transform: translateX(0);
        }
      }

      &:after {
        content        : '\2715';

        width          : 80%;
        max-width      : 30px;
        height         : 100%;
        background     : #e01747;

        position       : absolute;
        top            : 0;
        right          : 0;

        color          : white;
        font-size      : 10px;

        text-transform : uppercase;
        letter-spacing : 1px;

        display        : flex;
        justify-content: center;
        align-items    : center;

        transform      : translateX(100%);

        transition     : transform .3s ease;
      }
    }
  }

  input[type="search"] {
    width          : 100%;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;

    border         : solid 1px #cbd7e8;
    border-radius  : 0;

    padding        : 10px;

    max-width      : 75ch;
    overflow       : hidden;

    box-shadow     : 0 2px 4px 0 rgba(0, 67, 175, 0.1);
    background     : #ffffff;
  }

  .abc-select__body {
    width         : 100%;

    position      : inherit;
    top           : 0;

    opacity       : 1;
    pointer-events: auto;

    overflow      : visible;

    border        : 0 solid transparent;
    box-shadow    : 0 2px 4px 0 rgba(0, 67, 175, 0.1);
    background    : #ffffff;

    margin-top    : 20px;

    overflow      : auto;
    max-height    : 400px;
  }
}