@import '../../../../styles';

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

  height: 100%;

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

  button {
    margin-top: 0;
  }

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

    width: 100%;
    margin-left: auto;
    margin-right: auto;

    flex: 1 0 auto;

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

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

    max-width: 800px;

    & > * {
      max-width: 200px;
      box-sizing: content-box;
      flex: 0 0 auto;

      &:not(:nth-last-child(1)) {
        margin-right: var(--medium-padding);
        @media (max-width: $mobile-width) {
          margin-right: var(--small-padding);
        }
      }
    }

    position: relative;

    @for $i from 1 to 6 {
      & > *:first-child:nth-last-child(#{$i}),
      & > *:first-child:nth-last-child(#{$i}) ~ * {
        width: calc((100% - (#{$i} - 1) * var(--medium-padding)) / #{$i});

        @media (max-width: $mobile-width) {
          width: calc((100% - (#{$i} - 1) * var(--small-padding)) / #{$i});
        }
      }
    }
  }

  .double-slider-container {
    @media (max-height: $min-height) {
      display: none;
    }
  }

  img {
    @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);
    }
  }
}