/* On Front Page Only */
.is-front {
  .paragraph--type--tab-group {
    .tabs-container {
      margin-right: -2rem;
      margin-left: -2rem;
    }
  }
}

.tabs-container {
  display: flex;
  flex-wrap: wrap;

  .radiotab {
    position: absolute;
    opacity: 0;
  }

  .radiotab:focus + .label {
    box-shadow: inset 0 0 0 2px var(--fdic-blue-tint-40);
  }

  .label {
    position: relative;
    width: 100%;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0;
    background-color: var(--table-header-bg-color);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;

    &::after {
      content: '\002B';
      position: absolute;
      right: 1.5rem;
      top: 50%;
      margin-top: -1px;
      padding: 4px;
      border-width: 0 3px 3px 0;
      color: var(--table-header-text-color);
      font-size: 2rem;
      transform: translateY(-50%);
    }
  }

  .label :is(h2, h3, h4, h5, h6) {
    margin: 0;
    color: var(--table-header-text-color);
  }

  .label:hover :is(h2, h3, h4, h5, h6) {
    text-decoration: underline;
  }

  input[aria-expanded="true"] + .label {
    border: solid 1px var(--table-border-color);
    background-color: var(--table-row-bg-color);

    &::after {
      content: '\2212';
      color: var(--table-header-bg-color);
    }
  }

  input[aria-expanded="true"] + .label :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-secondary);
  }

  .panel {
    box-sizing: content-box;
    display: block;
    width: 100%;
    padding: 0.5rem 1.5rem;
  }

  /* Necessary to override uswds.css and support search within tab content */
  .panel[hidden] {
    display: block;
    height: 0;
    padding: 0;
  }
}

@media (min-width: 600px) {
  .tabs-container {
    .panel {
      order: 99;
    }

    .label {
      flex: 1;
      flex-basis: 25%;

      &::after {
        display: none;
      }
    }
  }
}