@use "../base/mixins";
@use "../vars/variables";

.v-overflow-indicator {
  position: relative;
  padding-bottom: 4rem;

  &__top,
  &__bottom {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 4rem;
    width: 100%;
    background: linear-gradient(
      0,
      var(--uc-bg-bg-surface-1-0),
      var(--uc-bg-bg-surface-1)
    );
    z-index: 3;
    visibility: visible;
    opacity: 1;
    transition:
      visibility 0.3s ease,
      opacity 0.3s ease;

    @media screen and (max-width: variables.$bp-tablet) {
      height: 2.5rem;
    }

    @media screen and (min-width: variables.$bp-tablet-plus) and (max-height: 700px) {
      height: 2.5rem;
    }
  }

  &__bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    top: auto;
    bottom: 0;
    margin-top: -3.9375rem;
    background: linear-gradient(
      180deg,
      var(--uc-bg-bg-surface-1-0),
      var(--uc-bg-bg-surface-1)
    );
    padding-right: 1.875rem;

    @media screen and (max-width: variables.$bp-tablet) {
      margin-top: -2.4375rem;
    }

    @media screen and (min-width: variables.$bp-tablet-plus) and (max-height: 700px) {
      margin-top: -2.4375rem;
    }

    span {
      @include mixins.secondary-body-extrasmall;
      color: var(--uc-text-text-primary);
      transition: opacity 0.2s;
    }
  }

  &__scroll-button {
    position: absolute;
    right: 0;
    cursor: pointer;
    padding: 0;
    z-index: 4;

    i {
      font-size: 1rem;
      color: var(--uc-white);
    }
  }

  &.v-overflow-indicator--scrollable {
    overflow-y: scroll;
  }

  &--on-top {
    .v-overflow-indicator__top {
      visibility: hidden;
      opacity: 0;
    }
  }

  &--on-bottom {
    .v-overflow-indicator__bottom {
      visibility: hidden;
      opacity: 0;
    }
  }
}