storybook.scss

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,900&display=swap');

@import '~styles/vars';
@import '~styles/extendables';

body {
  #root {
    @extend %center-x-y;
    position: relative;
    max-width: 1000px;
    height: 100vh;
    margin: 0 auto;

    .btn,
    .ico-lg {
      .icon {
        font-size: 40px;
      }
    }

    .input {
      max-width: 400px;

      input[type='text'] {
        color: $color-white;
      }
    }

    .pill {
      .icon {
        font-size: 18px;
        color: $color-grey-shade-2;
      }
    }

    .pod {
      &.action-item {
        width: 400px;

        .btn {
          .icon {
            font-size: inherit;
          }
        }
      }

      &.spotlight,
      &.user {
        width: 190px;
      }
    }

    .skeleton-frame {
      width: 200px;
    }

    .widget {
      > header,
      p {
        color: $color-white;
      }
    }

    .header {
      .input {
        width: 275px;
      }

      .btn-user {
        .icon {
          font-size: 25px;
        }
      }

      .right {
        .icon {
          font-size: 15px;
        }
      }
    }
  }
}