@use "./mixins" as *;

.pl-scrollable {
  @include scrollbar(true, true);
}

.pl-scrollable-y {
  @include scrollbar(true, false);
}

.pl-scrollable-x {
  @include scrollbar(false, true);
}

span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

.inner-border {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
}

.double-contour {
  position: absolute;
  top: calc(var(--contour-offset) * -1);
  left: calc(var(--contour-offset) * -1);
  right: calc(var(--contour-offset) * -1);
  bottom: calc(var(--contour-offset) * -1);
  pointer-events: none;

  --offset-left-x: calc(var(--label-offset-left-x) + var(--contour-offset));

  clip-path: polygon(
    0 0,
    var(--offset-left-x) 0,
    var(--offset-left-x) 12px,
    var(--label-offset-right-x) 12px,
    var(--label-offset-right-x) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0
  );

  > div {
    position: absolute;
    top: var(--contour-offset);
    left: var(--contour-offset);
    right: var(--contour-offset);
    bottom: var(--contour-offset);
  }
}

a.btn-link {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: var(--font-size-main);
  line-height: 20px;
  color: var(--color-main-dark);
  text-decoration: none;
  user-select: none;

  .circle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-main-dark);
    border-radius: 50%;
    margin-right: 12px;
  }

  &:hover {
    background: transparent;

    .circle {
      background: var(--color-hover-bg);
    }
  }
}

.flip-theme {
  &__dark {
    display: none;
  }
}

[data-theme="dark"] .flip-theme {
  &__light {
    display: none;
  }

  &__dark {
    display: block;
  }
}

.info {
  display: inline-block;
  margin: 0 4px;
  @include icon(url("./images/16_info.svg"), 16px);

  [data-theme="dark"] & {
    @include icon(url("./images/16_info-dark.svg"), 16px);
  }
}

.checkmark {
  @include icon(url("./images/16_checkmark.svg"), 16px);

  [data-theme="dark"] & {
    @include icon(url("./images/16_checkmark-dark.svg"), 16px);
  }
}

.ml-auto {
  margin-left: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.flex-1 {
  flex: 1;
}

@for $i from 1 through 48 {
  .p-#{$i} {
    padding: #{$i}px;
  }

  .pt-#{$i} {
    padding-top: #{$i}px;
  }

  .pl-#{$i} {
    padding-left: #{$i}px;
  }

  .pr-#{$i} {
    padding-right: #{$i}px;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  .m-#{$i} {
    margin: #{$i}px;
  }

  .mt-#{$i} {
    margin-top: #{$i}px;
  }

  .ml-#{$i} {
    margin-left: #{$i}px;
  }

  .mr-#{$i} {
    margin-right: #{$i}px;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }

  .gap-#{$i} {
    gap: #{$i}px;
  }
}