/* 건너뛰기 링크 */
//사이즈 정의
@mixin skip-link-size-variable() {
  --krds-skip-link--pc-font-size: var(--krds-pc-font-size-body-small);
  --krds-skip-link--mobile-font-size: var(--krds-mobile-font-size-body-small);
}

//컬러 정의
@mixin skip-link-color-variable($mode: light) {
  --krds-skip-link--color-background: var(--krds-#{$mode}-color-background-inverse);
  --krds-skip-link-color-text: var(--krds-#{$mode}-color-text-basic-inverse);
}


//모드 설정
$mode-setting: light;

#krds-skip-link {
  @include skip-link-size-variable();
  @include skip-link-color-variable(#{$mode-setting});
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  text-align: center;
  background-color: var(--krds-skip-link--color-background);
  a {
    &:not(:focus) {
      @include sr-only;
    }
    &:focus {
      @include flex-layout($ai: center, $jc: center);
      @include focus();
      font-size: var(--krds-pc-font-size-body-small);
      color: var(--krds-skip-link-color-text);
      width: 100%;
      height: var(--krds-size-height-5);
      margin: 0 auto;
      text-align: center;
      @include size-medium {
        font-size: var(--krds-skip-link--mobile-font-size);
      }
    }
  }
}

//고대비모드
@include color-mode($mode: high-contrast) {
  //모드 설정
  $mode-setting: high-contrast;

  #krds-skip-link {
    @include skip-link-color-variable(#{$mode-setting});
  }
}