life-towers/frontend/src/app/components/page/page.component.scss

@import '../../../library/main';

:host {
  display: flex;
  flex-direction: column;

  height: 100%;
  min-height: 0;
  position: relative; // anchor for absolute-positioned .trash

  @include inner-spacing(var(--large-padding));

  button {
    margin-top: 0;
  }

  .towers {
    display: flex;
    justify-content: center;

    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;

    flex: 1 1 auto;
    min-height: 0;

    transition: box-shadow $short-animation-time;

    max-width: 100%;
    gap: var(--medium-padding);

    &.cdk-drop-list-dragging {
      *:not(.cdk-drag-placeholder) {
        transition: transform $long-animation-time cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .add-tower-wrapper {
      @include center-child();

      img.add-tower {
        height: 48px;

        @media (max-width: $mobile-width) {
          height: 32px;
        }

        opacity: 0.33;
        transition: opacity $long-animation-time;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }
    }

    &>* {
      width: 100%;
      max-width: 200px;
      box-sizing: border-box;
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
    }

    position: relative;

    @media (max-width: $mobile-width) {
      width: auto;
      margin-inline: calc(-1 * var(--large-padding));

      --mobile-tower-width: calc(66vw - var(--small-padding));
      --mobile-tower-side-padding: max(var(--medium-padding),
          calc((100% - var(--mobile-tower-width)) / 2));

      overflow-x: auto;
      overflow-y: hidden;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--mobile-tower-side-padding);
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding: 0 var(--mobile-tower-side-padding);
      max-width: none;
      gap: var(--medium-padding);

      &::-webkit-scrollbar {
        display: none;
      }

      &>* {
        width: var(--mobile-tower-width) !important;
        max-width: var(--mobile-tower-width) !important;
        min-width: var(--mobile-tower-width) !important;
        scroll-snap-align: center;
        flex: 0 0 var(--mobile-tower-width);
      }
    }
  }

  .double-slider-container {
    width: 100%;
    transition: opacity $long-animation-time;

    @media (max-height: $min-height) {
      display: none;
    }

    &.transparent {
      opacity: 0;
      pointer-events: none;
    }
  }

  .confirm-delete {
    @include card();
    width: 66vw;
    max-width: 500px;

    @media (max-width: $mobile-width) {
      width: 88vw;
      max-width: 88vw;
      padding: var(--medium-padding);
    }

    box-sizing: border-box;
    padding: var(--large-padding);
    position: relative;
    box-shadow: $shadow;
    @include inner-spacing(var(--large-padding));
    text-align: center;

    .header {
      @include center-child();

      .exit {
        position: absolute;
        right: var(--large-padding);
        @include exit();
      }
    }

    p {
      strong {
        font-weight: bold;
      }
    }

    .confirm-buttons {
      display: flex;
      justify-content: center;
      gap: var(--large-padding);

      button {
        max-width: 100%;
      }

      button.danger {
        color: #b53f3f;
        border-bottom-color: #b53f3f55;

        &:after {
          background-color: #b53f3f;
        }
      }

      @media (max-width: $mobile-width) {
        flex-direction: column;
        gap: var(--small-padding);

        button {
          width: 100%;
        }
      }
    }
  }

  img.trash {
    @include square(48px);
    padding: 16px;

    position: absolute;
    z-index: 1500;
    bottom: 8px;
    left: 50%;
    margin: 0 !important;

    transform: translateX(-50%) scale(0);

    transition: transform $long-animation-time;

    &.active {
      transform: translateX(-50%) scale(1);
    }

    &:hover {
      transform: translateX(-50%) scale(1.1);
    }
  }
}