:root {
  --tabs--tab-background: transparent;
  --tabs--tab-border_colour: #1d42a6;
  --tabs--tab-text: #1d42a6;
  --tabs--border-radius-size: 10px;
  --tabs--border-size: 1px;
  --tabs--border_style: solid;
  --tabs--font_family: 'Roboto', sans-serif;
  --tabs--font_size: var(--step-md);
  --tabs--font_weight: 700;
  --tabs--padding: var(--space-xs) var(--space-sm);
  --tabs--active-bg-color: var(--secondary-brand-colour-4);
  --tabs--active-fg-color: #ffffff;
  --tabs--active--tab-background: #1d42a6;
  --tabs--active--tab-border_colour: #1d34a6;
  --tabs--active--tab-text: #ffffff;
  --tabs--hover--tab-background: #002147;
  --tabs--hover--tab-text: #ffffff;
  --tabs--content-border_colour: #1d42a6;
}

.me-tabs {
  .me-tabs__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    min-width: max-content;

    @media (width < 768px) {
      flex-direction: column;
      width: 100%;

      .me-tabs__menu-item .me-tabs__tab-button {
        border-bottom: 0;
      }
      .me-tabs__menu-item:last-child .me-tabs__tab-button {
        border-bottom-width: var(--tabs--border-size);
        border-bottom-color: var(--tabs--tab-border_colour);
        border-bottom-style: var(--tabs--border_style);
      }
    }

    .me-tabs__menu-item .me-tabs__tab-button:hover {
      border-color: var(--tabs--hover--tab-background);
    }
  }

  .me-tabs__inner {
    border: 0;
    /* Restrict direct Text components to Narrow width. */
    .me-tabs__tab-content {
      & > .oxfcms-text {
        width: var(--oxfcms-component--small-width);
        margin: auto;
      }
    }
  }
  .me-tabs__tab {
    padding: var(--space-md) 0;
  }

}

.me-tabs__menu-item {
  display: inline-flex;
  .me-tabs__tab-button {
    padding: var(--tabs--padding);
    text-decoration: none;
    font-size: var(--tabs--font_size);
    font-weight: var(--tabs--font_weight);
    font-family: var(--tabs--font_family);
    border-width: var(--tabs--border-size);
    border-color: var(--tabs--tab-border_colour);
    border-style: var(--tabs--border_style);
    color: var(--tabs--tab-text);
    background-color: var(--tabs--tab-background);
    /* Hover */
    &[aria-selected="false"]:hover, &:hover {
      color: var(--tabs--hover--tab-text);
      background-color: var(--tabs--hover--tab-background);
    }
    /* Active */
    &[aria-selected="true"] {
      background-color: var(--tabs--active--tab-background);
      color: var(--tabs--active--tab-text);
      border-color: var(--tabs--active--tab-border_colour);
      /* Hover */
      &:hover {
        color: var(--tabs--hover--tab-text);
        background-color: var(--tabs--hover--tab-background);
      }
    }
    

    @media (width < 768px) {
      width: 100%;
    }


  }

  &:not(:last-of-type) {

    @media (width >= 768px) {
      .me-tabs__tab-button {
        border-right: none;
      }
    }
  }

  &:first-of-type {
    .me-tabs__tab-button {
      border-top-left-radius: var(--tabs--border-radius-size);
      border-bottom-left-radius: var(--tabs--border-radius-size);
    }
  }

  &:last-of-type {
    .me-tabs__tab-button {
      border-top-right-radius: var(--tabs--border-radius-size);
      border-bottom-right-radius: var(--tabs--border-radius-size);
    }
  }

}

@media (width < 768px) {
  .me-tabs {
    .me-tabs__menu {
      .me-tabs__menu-item {
        &:first-of-type {
          .me-tabs__tab-button {
            border-top-left-radius: var(--tabs--border-radius-size);
            border-top-right-radius: var(--tabs--border-radius-size);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
        &:last-of-type {
          .me-tabs__tab-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--tabs--border-radius-size);
            border-bottom-right-radius: var(--tabs--border-radius-size);
          }
        }
      }
    }
  }
}