@use 'src/styles/abstracts' as *;

.BoxWrapper {
  position: absolute;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -1px -1px 0 0px $pico-30, inset -1px -1px 0 0px $pico-30;
  &__box {
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  &__fullScreen {
    position: absolute;
    top: $space-xxxs;
    left: calc(100% - 24px - 0.25rem);
    z-index: 1;
    text-align: right;
    background-color: $white;
  }
  &__depthSlider {
    padding: 0;
    background-color: white;
    width: calc(100% - 2px);
    height: 1.75rem;
    margin-bottom: toRem(1px);
    & > .Slider {
      width: 100%;
      max-width: 46rem;
      margin: 0 auto;
    }
  }
  &__fullViewContent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: $cuddle-10;
    position: relative;
    overflow: hidden;
    padding: 2rem 0.5rem;
    &__box {
      max-height: 100%;
      margin: 0 auto;
      overflow: auto;
    }
    &__depthSlider {
      position: absolute;
      padding: 0 $space-xs;
      z-index: 1;
      background-color: white;
      width: calc(100% - 20rem);
      height: 2rem;
      bottom: 0;
      & > .Slider {
        width: 100%;
        max-width: 46rem;
        margin: 0 auto;
      }
      & .depthSliderLabel {
        margin-right: $space-xxs;
      }
    }
  }
}
