@import '../abstract/_all';

$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;
  height: auto;
  min-height: auto;
  cursor: pointer;
  vertical-align: middle;

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

  &::after {
    content: '';
    background-color: $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: var(--line-width) solid $c-middle-grey;
}

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

  &::after {
    border: var(--line-width) solid $c-primary;
    border-radius: $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),
    $c-primary 10px
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 0.4s;
  min-height: auto;

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

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

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

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

  .is-error & {
    color: $c-error;
    background-image: linear-gradient(
      transparent calc(100% - 1px),
      $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;
  padding-inline: 0;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background: initial;
  &:hover {
    opacity: $opacity-links;
  }
}

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

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

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

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

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

  @include font-regular;

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

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

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

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

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

  .link4 {
    color: $c-white;

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

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

  .link5 {
    color: $c-white;

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

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

  .link7 {
    color: $c-white;

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

  .link8 {
    color: $c-white;
  }

  .link9 {
    color: $c-white;

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

  .link-raw {
    color: white;
  }

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

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

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

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

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

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