.demo {
  background-color: $colorWhite;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0px 6.6501px 5.32008px rgba($colorBlack, 0.0161557),
    0px 22.3363px 17.869px rgba($colorBlack, 0.0238443),
    0px 100px 80px rgba($colorBlack, 0.04),
    0 0 0 1px rgba($colorBlack, 0.05),
  ;
  
  &__preview {
    padding: 1.5rem;
  }
  
  &__source {
    background-color: $colorBlack;
  }

  &__tabs {
    padding: 1rem 1.5rem 0 1.5rem;
  }

  &__tab {
    display: inline-flex;
    position: relative;
    background-color: transparent;
    color: rgba($colorWhite, 0.7);
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
    font-weight: 500;
    border: none;
    margin-right: 0.5rem;

    &:first-child {
      margin-left: -0.5rem;
    }

    &.is-active,
    &:hover {
      color: $colorWhite;
      background-color: rgba($colorWhite, 0.1);
    } 
  }
  
  &__code {
    padding: 0.75rem 1.5rem;

    code, pre {
      padding: 0;
    }
  }
}