.clientdash-helper-page-wrap {
  margin-bottom: 1em;
  color: #888;
  font-style: italic;
  margin-bottom: 1em;

  &:last-of-type {
    .clientdash-helper-page-tab-wrap {
      border-bottom: none;
    }
  }

  &.clientdash-helper-page-disabled {
    .clientdash-helper-page-title {
      .clientdash-helper-page-visible-icon {
        display: none;
      }

      .clientdash-helper-page-hidden-icon {
        display: block;
      }
    }
  }
}

.clientdash-helper-page-tab-wrap {
  margin-bottom: 0.5em;
  width: 100%;
  max-width: 600px;

  &:last-of-type {
    padding-bottom: 2em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #ccc;
  }

  &.clientdash-helper-page-tab-disabled {
    .clientdash-helper-page-tab-title {
      .clientdash-helper-page-visible-icon {
        display: none;
      }

      .clientdash-helper-page-hidden-icon {
        display: block;
      }
    }
  }
}

.clientdash-helper-page-title, .clientdash-helper-page-tab-title {
  display: table;
  position: relative;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;

  *, *:before, *:after {
    box-sizing: border-box;
  }

  .clientdash-helper-page-disabled-notice {
    display: table-cell;
    font-size: 1.7em;
    line-height: 36px;
    height: 36px;
    text-align: center;
    vertical-align: top;
    width: 1%;
    height: 36px;
    font-size: inherit;

    .dashicons {
      vertical-align: middle;
      line-height: 36px;
      height: 36px;
      width: auto;
      margin: 0;
      padding-left: 0.4em;
      color: #32373c;
    }

    .clientdash-helper-page-visible-icon {
      display: block;
    }

    .clientdash-helper-page-hidden-icon {
      display: none;
      color: #b0b0b0;
    }
  }

  .clientdash-helper-page-icon-input {
    display: table-cell;
    font-size: 1.7em;
    line-height: 36px;
    height: 36px;
    text-align: center;
    vertical-align: top;
    width: 1%;

    .cd-dashicon-selector {
      background-color: #fff;
      border: 1px solid #ddd;
      border-right: 0;
      font-size: inherit;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
      color: #32373c;
      height: 36px;
      transition: 0.05s border-color ease-in-out;
    }

    &.cd-dashicon-selector-open {
      border-color: #5b9dd9;
      box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
    }

    .cd-dashicon-selector-preview {
      padding: 0 0.5em;
    }

    .dashicons {
      font-size: inherit;
      height: auto;
      width: auto;
    }
  }

  .clientdash-helper-page-title-input, .clientdash-helper-page-tab-title-input {
    display: table-cell;
    line-height: 36px;
    height: 36px;
    vertical-align: top;
    margin: 0;
    width: 100%;

    input {
      margin: 0;
      height: 36px;
      font-size: 1.2em;
    }
  }

  .clientdash-helper-page-roles-input, .clientdash-helper-page-tab-roles-input {
    display: table-cell;
    line-height: 36px;
    vertical-align: top;
    height: 36px;
    width: 1%;

    select {
      width: 100%;
    }

    button {
      line-height: 36px;
      height: 36px;
    }

    .select2 {
      height: 0;
      min-height: 0;
      vertical-align: top;

      &:not(.select2-container--open) {
        display: none;
      }

      &.select2-container--open + button {
        display: none;
      }
    }

    .select2-selection__rendered {
      display: none;
    }
  }
}

.clientdash-helper-page-description {
  margin-bottom: 1em;
}

.select2-dropdown.clientdash-helper-pages {
  border-top: 1px solid #aaa;
  border-radius: 0;
  width: 200px !important;
  box-shadow: 2px 2px 10px rgba(#000, 0.2);

  .select2-results__option {
    margin-bottom: 0;

    &.select2-results__option--highlighted {
      background-color: #0074A2;
    }

    &[aria-selected=true] {
      &:before {
        content: "\f147";
        font-family: dashicons;
        vertical-align: middle;
      }
    }
  }
}