.comparison { position: relative; overflow: hidden; .comparison-inner { display: flex; width: 100%; .comparison-section { display: flex; flex-direction: column; width: 50%; flex: 0 0 auto; } .comparison-before { padding-right: 16rem; } .comparison-after { padding-left: 16rem; } .card-subheading { height: 6rem; flex: 0 0 auto; } } .comparison-main { box-shadow: 0 0 0 1px $color-irma-silver inset; .comparison-container { padding-right: 30px; max-height: calc(100vh - 72rem); width: calc(100% + 30px); overflow-y: scroll; } .comparison-list { padding: 5rem; } .comparison-inner { & + .comparison-inner { margin-top: 7.5rem; .comparison-body { padding-top: 7.5rem; border-top: 1px solid $color-irma-silver; } } } } .comparison-body { color: rgba($color-irma-slate, 0.7); * { line-height: 1.5; } br { line-height: 200%; } h4 { color: rgba($color-irma-slate, 0.9); @include font-size-other(16px); & + * { margin-top: 3rem; } } .added, .removed { padding: 0 1px; } .added { background: rgba(#01C853, 0.15); } .removed { background: rgba($color-irma-danger, 0.15); } } .comparison-scrollbar { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 14rem; padding: 1px 2rem; height: calc(100% - 6rem); overflow: hidden; box-shadow: 0 -1px 0 $color-irma-silver inset, 0 1px 0 $color-irma-silver; .scrollbar-main { height: 100%; box-shadow: 0 0 0 1px $color-irma-aluminium; background: #F8F8F8; } .scrollbar-inner { position: relative; display: flex; width: 100%; height: 100%; & + .scrollbar-inner { padding-top: 4rem; border-top: 1px dotted rgba($color-irma-aluminium, 0.5); } &:not(:last-child) { padding-bottom: 4rem; } &::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateZ(0); width: 1px; height: 100%; background: $color-irma-aluminium; } } .scrollbar-handle { position: absolute; top: 0; left: 1px; width: calc(100% - 2px); box-shadow: 0 0 0 1px $color-irma-ocean inset, 0 0 0 3px rgba($color-irma-sky, 0) inset; border-radius: 2px; transition-duration: $transition; transition-property: box-shadow, height; &:hover, &:focus { box-shadow: 0 0 0 1px $color-irma-ocean inset, 0 0 0 3px rgba($color-irma-sky, 0.3) inset; } &::before, &::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 4rem + 4px); height: 100vh; background: rgba(#F8F8F8, 0.66); pointer-events: none; } &::before { bottom: 100%; } &::after { top: 100%; } } .scrollbar-section { width: 50%; padding: 0.5rem; flex: 0 0 auto; } span { position: relative; display: block; } .removed, .added { &::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: calc(100% + 1rem); } } .removed { &::before { background: $color-irma-danger; } } .added { &::before { background: #01C853; } } } }