@define-mixin tabs--custom-properties {
  --buffer: 20px;
}
.x-tabs--custom-properties {
  @mixin tabs--custom-properties;
}
@define-mixin tabs--focus-within {
  outline: 5px auto; /* to mimic browser outline */
}
.x-tabs--focus-within {
  @mixin tabs--focus-within;
}

@define-mixin tabs__tab--skin {
  padding-block: 1.25em 0.75em;
  padding-inline: 0.875em;
  margin-inline: var(--buffer);

  border-bottom: var(--global-border-width--x-thick) solid transparent;

  font-size: var(--global-font-size--medium);
  font-weight: var(--medium);

  &:is(label) {
    margin-bottom: 0; /* to undo `elements/form.css` */
  }
  &:is(a) {
    text-decoration: none;
  }
}
.x-tabs__tab {
  @mixin tabs__tab--skin;
}
@define-mixin tabs__tab--hover {
  border-color: var(--global-color-primary--dark);
}
.x-tabs__tab--hover {
  @mixin tabs__tab--hover;
}
@define-mixin tabs__tab--not-active {
  color: var(--global-color-primary--dark);
}
.x-tabs__tab--not-active {
  @mixin tabs__tab--not-active;
}
@define-mixin tabs__tab--active {
  color: var(--global-color-accent--light);
  border-color: var(--global-color-accent--light);
}
.x-tabs__tab--active {
  @mixin tabs__tab--active;
}

@define-mixin tabs__content--skin {
  padding-inline: var(--buffer);

  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);

  & > *:first-child {
    margin-top: var(--buffer);
  }
  & > *:last-child {
    margin-bottom: var(--buffer);
  }
}
.x-tabs__content {
  @mixin tabs__content--skin;
}