@use "sass:math";

@import '~styles/config';

.novaTvProfileBox {
  margin-bottom: $gutter;
  height: 100%;

  &.inGrid {
    @include grid-col;
    @media (min-width: $min-tablet) {
      @include grid-col(percentage(math.div(6, 12)));
    }

    @media (min-width: $min-desktop) {
      @include grid-col(percentage(math.div(4, 12)));
    }
  }

  &__container {
    position: relative;
    height: 100%;

    @include dotShadow();
  }

  &__shadow {
    position: relative;
    height: 100%;

    border-width: 1px;
    border-style: solid;
    border-color: $color-grey100;

    &::after {
      content: '';

      z-index: -1;

      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      height: 60px;

      box-shadow: 0 3px 65px 0 rgba(32, 32, 32, 0.125);

      @media (min-width: $min-tablet) {
        box-shadow: 0 5px 65px 0 rgba(32, 32, 32, 0.125);
      }
    }
  }

  &__wrapper {
    height: 100%;
    background-color: $color-black;

    transition: box-shadow 220ms ease-in-out;
    box-shadow: inset 0 0 0 0 transparent;

    @include colorify('color');

  }

  &__content {
    width: 100%;
  }
}