@use "../mixins/mixins" as *;
@use "../mixins/function" as *;
@use "../common/var.scss" as *;

@include b(link) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  gap: 4px;
  font-size: getCssVar("font-size", "medium");
  line-height: getCssVar("line-height", "medium");
  @include m(default) {
    color: getCssVar("color", "text-1");
    &:hover {
      color: getCssVar("color", "primary-6");
      &::after {
        border-bottom: 1px solid getCssVar("color", "primary-6") !important;
      }
    }
    @include not-when(disabled) {
      @include this-bm(link, always) {
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          height: 0;
          bottom: 0;
          border-bottom: 1px solid getCssVar("color", "text-1");
        }
      }
      @include this-bm(link, hover) {
        &:hover {
          &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 0;
            bottom: 0;
            border-bottom: 1px solid getCssVar("color", "primary-6");
          }
        }
      }
    }
    @include when(disabled) {
      color: getCssVar("color", "text-3");
      cursor: not-allowed;
    }
  }
  @each $type in $type-list {
    @include m(#{$type}) {
      color: getCssVar("color", #{$type}-6);
      &:hover {
        color: getCssVar("color", #{$type}-5);
      }
      @include not-when(disabled) {
        @include this-bm(link, always) {
          &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 0;
            bottom: 0;
            border-bottom: 1px solid getCssVar("color", #{$type}-6);
          }
        }
        @include this-bm(link, hover) {
          &:hover {
            &::after {
              content: "";
              position: absolute;
              left: 0;
              right: 0;
              height: 0;
              bottom: 0;
              border-bottom: 1px solid getCssVar("color", #{$type}-6);
            }
          }
        }
      }
      @include when(disabled) {
        color: getCssVar("color", #{$type}-4);
        cursor: not-allowed;
      }
    }
  }
}