.ca-content-panel {
  $block: &;

  background-color: $c-white;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  position: fixed;
  bottom: 0;
  z-index: $z-index-panel;

  &__header {
    height: $content-panel-header-height;
    border-bottom: $border-light;

    @include flex-valign;

    justify-content: space-between;
    background-color: $c-content-panel-header-bg;
    color: $c-content-panel-header-txt;
    padding: 0 $px10;

    @include bp(laptop) {
      height: $content-panel-header-height-computer;
      padding: 0 $px16;
    }
  }

  &__title {
    font-weight: $font-weight-bold;
    font-size: $font-size-l;

    @include bp(laptop) {
      font-size: $font-size-xl;
    }
  }

  &__close-icon {
    @include icon-circle;
  }

  &__body {
    flex: 1;
    overflow: hidden auto;
    position: relative;
  }

  &__close-button {
    height: 50px;
    background-color: $c-white;
    width: 100%;
    text-transform: uppercase;
    border-top: $border-light;
    text-align: center;
  }

  &--left {
    top: 0;
    left: 0;
    width: 90vw;

    #{$block}__close-icon {
      right: -27px;
    }
  }

  &--right {
    top: 0;
    right: 0;
    width: 90vw;

    #{$block}__close-icon {
      left: -27px;
    }
  }

  &--bottom {
    height: calc(var(--vh, 1vh) * 93);
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;

    #{$block}__header {
      justify-content: center;
    }

    #{$block}__close-icon {
      display: none;
    }

    @include bp(phone-only) {
      border-radius: $px20 $px20 0 0;
      overflow: hidden;
    }
  }
}