/* =============================================================================
   General
   ========================================================================== */

/* the sections only define --c-primary and --c-primary-light */
.gkmb__mplace {
  --c-primary-dark: var(--c-primary-light);
}

/* the CI uses no rounded corners; only radio buttons and dots stay round */
.gkmb__mplace .mplace__button,
.gkmb__mplace .mplace__iconbutton,
.gkmb__mplace .mplace__badge,
.gkmb__mplace .mplace__statuspill,
.gkmb__mplace .mplace__avatar,
.gkmb__mplace .mplace__toast,
.gkmb__mplace .mplace__emptyicon,
.gkmb__mplace .mplace__tabarrow,
.gkmb__mplace .mplace__tabtoggle,
.gkmb__mplace .mplace__tab.-active::after,
.gkmb__mplace .mplace__menu,
.gkmb__mplace .mplace__menuitem,
.gkmb__mplace .mplace__account,
.gkmb__mplace .mplace__search,
.gkmb__mplace .mplace__segment,
.gkmb__mplace .mplace__segmentoption span,
.gkmb__mplace .mplace__ddbutton,
.gkmb__mplace .mplace__check,
.gkmb__mplace .mplace__checkbox,
.gkmb__mplace .mplace__chip,
.gkmb__mplace .mplace__chip a,
.gkmb__mplace .mplace__card,
.gkmb__mplace .mplace__pagerlink,
.gkmb__mplace .mplace__notice,
.gkmb__mplace .mplace__photo,
.gkmb__mplace .mplace__asidecard,
.gkmb__mplace .mplace__dialog,
.gkmb__mplace .mplace__dialogclose,
.gkmb__mplace .mplace__input,
.gkmb__mplace .mplace__textarea,
.gkmb__mplace .mplace__select,
.gkmb__mplace .mplace__banner,
.gkmb__mplace .mplace__typeoption,
.gkmb__mplace .mplace__upload,
.gkmb__mplace .mplace__thumb,
.gkmb__mplace .mplace__thumb img,
.gkmb__mplace .mplace__thumbremove,
.gkmb__mplace .mplace__consent,
.gkmb__mplace .mplace__successicon,
.gkmb__mplace .mplace__stat,
.gkmb__mplace .mplace__row,
.gkmb__mplace .mplace__chat,
.gkmb__mplace .mplace__bubble,
.gkmb__mplace .mplace__conversationinput,
.gkmb__mplace .mplace__send {
  border-radius: 0;
}

.gkmb__mplace .mplace__menu,
.gkmb__mplace .mplace__tabarrow,
.gkmb__mplace .mplace__segmentoption input:checked + span {
  box-shadow: none;
}

.gkmb__mplace .mplace__menu {
  border: 1px solid rgb(var(--c-border));
}

/* =============================================================================
   Navigation
   ========================================================================== */

/* white bar like the search field, so that it stands out from the content */
.gkmb__mplace .mplace__nav {
  margin-bottom: 2rem;
  padding: 0 0.75rem;
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-neutral-lightest));
}

/* the line of the active tab grows in from the left on hover */
.gkmb__mplace .mplace__tab::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 3px;
  background: rgb(var(--c-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.gkmb__mplace .mplace__tab.-active::after {
  transform: scaleX(1);
}

/* =============================================================================
   Buttons like .font__button
   ========================================================================== */

.gkmb__mplace .mplace__button {
  min-height: 0;
  padding: 0.6rem 1.2rem;
  border-width: 1px;
  font-size: inherit;
  font-weight: var(--f-weight-n);
  line-height: 1.4;
  text-transform: uppercase;
}

.gkmb__mplace .mplace__button.-primary {
  border-color: rgb(var(--c-primary));
}

.gkmb__mplace .mplace__button.-primary:has(.mplace__buttonarrow) {
  padding-right: 1.2rem;
}

.gkmb__mplace .mplace__buttonarrow {
  display: none;
}

.gkmb__mplace .mplace__button.-ghost {
  border-color: rgb(var(--c-primary));
  color: rgb(var(--c-primary));
}

.gkmb__mplace .mplace__button.-small {
  padding: 0.4rem 0.9rem;
  font-size: var(--f-size-s-1);
}

/* =============================================================================
   Cards
   ========================================================================== */

.gkmb__mplace .mplace__card {
  transition: border-color 0.16s ease;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 800px) {
  .gkmb__mplace .mplace__nav {
    padding: 0 1.25rem;
  }
}

@media (hover: hover) {
  .gkmb__mplace .mplace__tab:hover::after {
    transform: scaleX(1);
  }

  .gkmb__mplace .mplace__button:hover,
  .gkmb__mplace .mplace__button.-ghost:hover {
    border-color: rgb(var(--c-primary));
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
  }

  .gkmb__mplace .mplace__button.-primary:hover {
    border-color: rgb(var(--c-primary-light));
    background: rgb(var(--c-primary-light));
  }

  .gkmb__mplace .mplace__card:hover {
    box-shadow: none;
    transform: none;
  }
}