@import 'part:@lyra/base/theme/variables-style';

.root {
  display: block;
}

.auto {
  composes: root;
}

.small {
  composes: root;
  width: calc(100vw - var(--medium-padding) * 4);

  @media (--screen-medium) {
    max-width: 20rem;
  }
}

.medium {
  composes: root;
  width: calc(100vw - var(--medium-padding) * 4);

  @media (--screen-medium) {
    width: 27rem;
  }

  @media (--screen-default) {
    width: 33rem;
  }

  @media (--screen-large) {
    width: 35rem;
  }
}

.large {
  composes: root;
  width: calc(100vw - var(--medium-padding) * 4);

  @media (--screen-medium) {
    width: 28rem;
  }

  @media (--screen-default) {
    width: 40rem;
  }

  @media (--screen-large) {
    width: 50rem;
  }
}