/* stylelint-disable selector-max-id */

#mainTabContainer {
  background-color: transparent;
  display: flex;
  position: relative;

  #ui-id-11 {
    overflow: auto;

    .crm-accordion-body,
    .contact-activity-selector-activity {
      overflow: auto;
    }
  }

  .ui-dialog {
    background: $crm-white;
  }

  // Override a white background rule made by jquery-ui.css
  .ui-widget-content {
    background: transparent;
  }
}

.crm-contact-tabs-list {
  background: $crm-white;
  border-radius: 0;
  box-shadow: $box-shadow;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  width: 200px;

  // This snippet is used to hide the tab panels until
  // jQuery UI is bootstraped on the tabs container
  &:not(.ui-tabs-nav) {
    ~ .ui-tabs-panel {
      visibility: hidden;
    }
  }

  a {
    box-sizing: border-box;
    display: block;
    font-size: $font-size-small !important;
    height: 100%;
    padding: 15px !important;
    width: 100%;

  }

  .crm-tab-button {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    font: $crm-font-weight-h2 $font-size-base $font-family-base;
    margin-bottom: 0;
    padding: 0;
    top: 0;
    white-space: normal;
    width: 100%;

    &.ui-tabs-active,
    &:hover {
      background: $crm-background;
      border: 0;

      a {
        color: $brand-primary !important;
      }
    }

    a {
      color: $gray-darker !important;
      cursor: default;
    }

    em {
      background: $brand-primary;
      border-radius: 10px;
      color: $crm-white !important;
      display: inline-block;
      float: right;
      margin-left: 5px;
      min-width: 10px;
      padding: 0 5px;
      text-align: center;

      &:empty {
        display: none;
      }
    }

    &.crm-count-0 {
      em {
        background: $crm-gray-matte;
      }
    }
  }

  ~ .ui-tabs-panel {
    flex-grow: 1;
    padding: 20px !important;

    .container-fluid {
      // Necessary to override the id-based namespaces of T&A and JC
      // (as they still use their own copy of Bootstrap)
      max-width: $container-large-desktop !important;
    }
  }

  // Necessary because of the !important defined in
  // @see https://github.com/civicrm/civicrm-core/blob/cc38fb8ddcbbc8b60679504dd93522df852c48bf/css/civicrm.css#L1616-L1619
  .ui-tabs-anchor {
    padding: 15px !important;
  }
}