@import '../core/variables';
@import '../components/button';
@import '../components/badges';
@import '../components/list-group';
@import '../components/custom-forms';
@import '../utilities/typography';
@import '../core/spacing/spacing';

@import 'node_modules/bootstrap/scss/mixins/breakpoints';
@import 'node_modules/bootstrap/scss/utilities/spacing';

// TODO: Maybe this should go in a file that is included in all components
:host {
  font-family: $font-family-base;
  font-size: $font-size-base;

  p {
    font-size: inherit;
  }
}

::slotted(a) {
  color: $link-color;
  color: Var(--link-color);
  text-decoration: none;
  text-decoration: Var(--link-decoration, none);
}
::slotted(a:hover) {
  color: $link-color-hover;
  color: Var(--link-color-hover);
  text-decoration: underline;
  text-decoration: Var(--link-decoration-hover, underline);
}

footer {
  background-color: get-colour(grey-800);
  background-color: Var(--sdds-grey-800);
  color: get-colour(grey-200);
  color: Var(--sdds-grey-200);
}

.container {
  display: flex;
}
.list-group-item {
  font: inherit;
}

// TODO: Should we reverse these rules so it follows mobile first
@media (max-width: 991px) {

  ::slotted(a) {
    //FIXME: Add correct rem
    padding: 4.25rem 7.5rem;
  }

  .main {
    flex: 0 0 auto;
  }
  .list-group {

    &-item {
      //FIXME: Add correct rem
      font-size: $spacing-element-16;
      font-weight: bold;
      //FIXME: Add correct rem
      padding: 4.25rem 7.5rem;

      &.active {
        background-color: transparent;
        color: inherit;
        border-color: get-colour(grey-300);
      }
    }
  }
}