@use "../abstracts/variables";

.sheet {
  &-arrows {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    transition: transform calc(var(--sheet-duration) * .5);
    flex-direction: var(--ss-flex-direction, row);

    label {
      padding: var(--sheet-arrow-padding, variables.$arrow-padding);
      background-color: var(--sheet-arrow-bg, variables.$arrow-bg);
      display: var(--ss-arrow-r, none);
      transition: opacity calc(var(--sheet-duration) * .5);
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      &::before {
        content: "";
        transform: rotate(calc((var(--ss-initial-arrow-r, 0) + var(--ss-arrow-r)) * 1deg));
        background-image: var(--sheet-arrow, variables.$arrow-svg);
        width: var(--sheet-arrow-size);
        height: var(--sheet-arrow-size);
        transition: background-color var(--sheet-duration);
        display: block;
      }
    }
  }

  // In mobile, arrows at the top
  @media (width >= 768px) {
    &-arrows {
      top: auto;
      bottom: calc(var(--sheet-space) + var(--sheet-dot-size));
    }

    &:not(:hover) &-arrows {
      transform: translateX(110%);
    }
  }
}