.mc-background {
  position: relative;

  &__background-container {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
  }

  &__content-container {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
  }

  &__content {
    -webkit-box-flex: 1;
            flex: 1;
    width: 100%;
  }

  &.mc-background--position {
    &-x {
      &-left {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-pack: start;
                  justify-content: flex-start;
        }
      }

      &-center {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-pack: center;
                  justify-content: center;
        }
      }

      &-right {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-pack: end;
                  justify-content: flex-end;
        }
      }
    }

    &-y {
      &-top {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-align: start;
                  align-items: flex-start;
        }
      }

      &-center {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-align: center;
                  align-items: center;
        }
      }

      &-bottom {
        .mc-background__background-container,
        .mc-background__content-container {
          -webkit-box-align: end;
                  align-items: flex-end;
        }
      }
    }
  }

  &--loaded {
    .mc-background__background-container {
      visibility: visible;
    }
  }

  &--fit-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &--fit-container,
  &--fit-content {
    .mc-background__background-container {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  &--fit-container,
  &--fit-background {
    .mc-background__content-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  &--size-cover {
    .mc-background__background {
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  &--size-contain {
    .mc-background__background {
      -o-object-fit: contain;
         object-fit: contain;
      max-width: 100%;
      max-height: 100%;
    }
  }

  &--color-light {
    background: $mc-color-light;
  }

  &--color-medium {
    background: $mc-color-gray-100;
  }

  &--color-dark {
    background: $mc-color-dark;
  }

  &--color-transparent {
    background: transparent;
  }

  &--color-dim {
    background: rgba($mc-color-dark, 0.7);
  }
}