:host {
  display: block;
  width: 100%;
}

  :host(.box--bordered) {
    border: var(--s-border-width-default) solid var(--s-border-default);
  }

  :host(.box--border-color-default) {
    border-color: var(--s-border-default);
  }

  :host(.box--border-color-strong) {
    border-color: var(--s-border-strong);
  }

  :host(.box--bordered-block-end) {
    border-block-end-width: var(--s-border-width-default);
    border-block-end-style: solid;
  }

  :host(.box--bordered-block-start) {
    border-block-start-width: var(--s-border-width-default);
    border-block-start-style: solid;
  }

  :host(.box--bordered-inline-end) {
    border-inline-end-width: var(--s-border-width-default);
    border-inline-end-style: solid;
  }

  :host(.box--bordered-inline-start) {
    border-inline-start-width: var(--s-border-width-default);
    border-inline-start-style: solid;
  }

  :host(.box--bordered-block-start-when-scrolled.box--scrollable) {
    border-block-start-width: var(--s-border-width-default);
    border-block-start-style: solid;
    border-block-start-color: transparent;
  }

  :host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)) {
    border-block-start-color: var(--s-border-default);
  }

  :host(.box--bordered-block-end-when-scrolled.box--scrollable) {
    border-block-end-width: var(--s-border-width-default);
    border-block-end-style: solid;
    border-block-end-color: transparent;
  }

  :host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)) {
    border-block-end-color: var(--s-border-default);
  }

  :host(.box--hide-scrollbar) {
    scrollbar-width: none;
  }

  :host(.box--hide-scrollbar)::-webkit-scrollbar {
      display: none;
    }

  :host(.box--cover) {
    width: 100%;
    height: 100%;
  }

  :host * {
    box-sizing: border-box;
  }