@use '../abstract/_all';
@use '../abstract/mixins';
@use '../abstract/setup';

$opacity-links: 0.6;

a {
  &:hover {
    opacity: $opacity-links;
  }
}

.link4 {
  position: relative;
  display: inline-block;
  border: 0;
  transform: none;
  transition: background-color 0.3s ease-in-out;
  margin: 0;
  padding: 2px 0;
  cursor: pointer;

  &:hover {
    opacity: $opacity-links;
  }

  &::after {
    content: '';
    background-color: setup.$c-primary;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
  }
}

.link-button-prev {
  background: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 1;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid setup.$c-middle-grey;
}

.inner-button {
  margin-top: -1px;
  display: block;
  width: 40px;
  height: 40px;
  color: setup.$c-white;

  &::after {
    border: 1px solid setup.$c-primary;
    border-radius: setup.$form-radius;
    border-right: 0;
    border-top: 0;
    content: ' ';
    display: block;
    height: 10px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    top: 53%;
    right: 16px;
    transform: rotate(-135deg);
    transform-origin: center;
    width: 10px;
  }
}

.link-line {
  display: inline;
  position: relative;
  border: 0;
  padding: 0;
  transform: none;
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(transparent calc(100% - 1px), setup.$primary 10px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 0.4s;

  &:hover {
    opacity: $opacity-links;
  }

  &.c-feel-dark {
    background-image: linear-gradient(transparent calc(100% - 1px), setup.$c-feel-dark 10px);
  }

  &.c-feel {
    background-image: linear-gradient(transparent calc(100% - 1px), setup.$c-feel 10px);
  }
  &.is-error,
  &.c-error {
    background-image: linear-gradient(transparent calc(100% - 1px), setup.$c-error 10px);
  }

  .is-error & {
    background-image: linear-gradient(transparent calc(100% - 1px), setup.$c-error 10px);
  }
  &button {
    padding-left: 0;
    padding-right: 0;
  }

  &button.link-svg-pre {
    padding-left: 20px;
    padding-right: 0;
  }

  &button.link-svg-post {
    padding-right: 20px;
    padding-left: 0;
  }
}

.link-raw {
  display: inline-block;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background: initial;
  &:hover {
    opacity: $opacity-links;
  }
}

.link-svg-pre {
  padding-left: 20px;

  @include mixins.font-regular;

  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background-position-x: 20px;

  svg-icon {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
  }

  &:hover {
    opacity: $opacity-links;
  }
}

.link-svg-post {
  padding-right: 20px;

  @include mixins.font-regular;

  display: initial;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background-position: calc(100% - 20px);

  svg-icon {
    position: absolute;
    right: 0;
    top: 2px;
    width: 16px;
    height: 16px;
  }

  &:hover {
    opacity: $opacity-links;
  }
}

.has-light {
  a {
    color: setup.$c-white;
  }
  .link1 {
    color: setup.$c-white;

    &::after {
      background-color: setup.$c-white;
    }
  }

  .link4 {
    color: setup.$c-white;

    &::after {
      background-color: setup.$c-white;
    }

    .link4-underline {
      background: setup.$c-white;
    }
  }

  .link5 {
    color: setup.$c-white;

    &::after {
      background: setup.$c-white;
    }
  }

  .link6 {
    color: setup.$c-white;
    border-bottom: 2px solid setup.$c-white;
  }

  .link7 {
    color: setup.$c-white;

    &::after {
      background: setup.$c-white;
    }
  }

  .link8 {
    color: setup.$c-white;
  }

  .link9 {
    color: setup.$c-white;

    &::after {
      background: setup.$c-white;
    }
  }

  .link-raw {
    color: white;
  }

  .link-line {
    color: white;
    background-image: linear-gradient(transparent calc(100% - 1px), white 10px);

    &::after {
      background-color: setup.$c-white;
    }
  }

  .link-multiline {
    color: white;
    background-image: linear-gradient(transparent calc(100% - 1px), white 10px);

    &::after {
      background-color: setup.$c-white;
    }
  }

  .link-svg-post {
    color: white;
  }

  .link-svg-pre {
    color: white;
  }
}