/*!
 * Copyright (c) 2024 PLANKA Software GmbH
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

:global(#app) {
  @mixin smallScreen {
    margin: 1rem auto;
    width: 95%;
  }

  .prevButton {
    background: rgba(255, 255, 255, 0.036);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    left: -120px;
    padding: 18px 0;
    position: absolute;
    width: 100px;

    &:hover {
      background: rgba(255, 255, 255, 0.072);

      .prevkButtonIcon {
        color: rgba(255, 255, 255, 0.72);
      }
    }
  }

  .prevButtonIcon {
    color: rgba(255, 255, 255, 0.36);
    position: sticky;
    top: 5px;
  }

  .wrapper {
    margin: 2rem auto;
    width: 880px;

    @media (width < 926px) {
      @include smallScreen;
    }
  }

  .wrapperStory {
    width: 980px;

    @media (width < 1026px) {
      @include smallScreen;
    }

    .prevButton {
      padding: 20px 0;
    }

    .prevButtonIcon {
      top: 7px;
    }
  }
}