/** @define component  */

/*! | superflycss/component-header |
    | MIT License                |
    | https://github.com/superflycss/component-header/blob/master/LICENSE.md */

@import "@superflycss/utilities-colors/variables/notifications/";
@import "@superflycss/variables-dimension";

:root {
  --Header-width: 100%;
  --Header-padding-top: 0px;
  --Header-padding-bottom: 0px;
  --Header-padding-left: 1rem;
  --Header-padding-right: 1rem;
  --Header-background-color: transparent;

  --Header {
    display: flex;
    padding-left: var(--Header-padding-left);
    padding-right: var(--Header-padding-right);
    width: var(--Header-width);
    background-color: var(--Header-background-color);
  }
}

.Header {
  @apply(--Header);
}

:root {
  --Header--column-padding-top: 2rem;
  --Header--column-padding-bottom: 2rem;
  --Header--column {
    padding-top: var(--Header--column-padding-top);
    padding-bottom: var(--Header--column-padding-bottom);
  }
}


.Header--column {
  @apply(--Header);
  @apply(--Header--column);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.Header--shadow {
  @apply(--Header);
  box-shadow: 0 0 0.5rem rgba(0,0,0,.1);
}

.Header--shadow-column {
  @apply(--Header);
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 0.5rem rgba(0,0,0,.1);
}


:root {
  --Header_link-text-color: var(--color-link);
  --Header_link-text-decoration: none;
  --Header_link-font-size: 1.5rem;
  --Header_link-font-family: sans-serif;
  --Header_link-font-weight: 500;
  --Header_link-display: inline-block;
  --Header_link-padding-left: 1rem;
  --Header_link-padding-right: 1rem;
  --Header_link-margin-top: 2rem;
  --Header_link-margin-bottom: 2rem;
  --Header_link-padding-left: 5rem;
  --Header_link-padding-right: 5rem;
  --Header_link-padding-top: 0.5rem;
  --Header_link-padding-bottom: 0.5rem;
  --Header_link-border-width: 3px;
  --Header_link-border-style: solid;
  --Header_link-border-color: var(--Header_link-text-color);
  --Header_link-border-radius: 4px;

  --Header_link_onHover-text-decoration: none;
  --Header_link_onHover-text-color: var(--color-link);
  --Header_link_onHover-border-color: currentColor;
  --Header_link_onHover-border-width: 3px;

  --Header_link_onActive-text-decoration: none;
  --Header_link_onActive-text-color: var(--Header_link-text-color);
  --Header_link_onActive-border-color: var(--Header_link-text-color);
  --Header_link_onActive-border-width: 3px;

  --Header_link_onVisited-text-decoration: none;
  --Header_link_onVisited-text-color: var(--Header_link-text-color);
  --Header_link_onVisited-border-color: var(--Header_link-text-color);
  --Header_link_onVisited-border-width: var(--Header_link-border-width);

  --Header_link {
    color: var(--Header_link-text-color);
    text-decoration: var(--Header_link-text-decoration);
    font-size: var(--Header_link-font-size);
    font-family: var(--Header_link-font-family);
    font-weight: var(--Header_link-font-weight);
    display: var(--Header_link-display);
    padding-left: var(--Header_link-padding-left);
    padding-right: var(--Header_link-padding-right);
    margin-top: var(--Header_link-margin-top);
    margin-bottom: var(--Header_link-margin-bottom);
    padding-left: var(--Header_link-padding-left);
    padding-right: var(--Header_link-padding-right);
    padding-top: var(--Header_link-padding-top);
    padding-bottom: var(--Header_link-padding-bottom);
    border-width: var(--Header_link-border-width);
    border-style: var(--Header_link-border-style);
    border-color: var(--Header_link-border-color);
    border-radius: var(--Header_link-border-radius);
  }
}

.Header_link {
  @apply(--Header_link);
}

.Header_link:visited {
  text-decoration: var(--Header_link_onVisited-text-decoration);
  color: var(--Header_link_onVisited-text-color);
  border-color: var(--Header_link_onVisited-border-color);
  border-width: var(--Header_link_onVisited-border-width);
}

.Header_link:hover {
  text-decoration: var(--Header_link_onHover-text-decoration);
  color: var(--Header_link_onHover-text-color);
  border-color: var(--Header_link_onHover-border-color);
  border-width: var(--Header_link_onHover-border-width);
}

.Header_link:active {
  text-decoration: var(--Header_link_onActive-text-decoration);
  color: var(--Header_link_onActive-text-color);
  border-color: var(--Header_link_onActive-border-color);
  border-width: var(--Header_link_onActive-border-width);
}

.u-sticky-header {
    position: fixed !important;
    z-index: var(--zindex-sticky) !important;
    top: 0px;
}
