@layer ds_components {
  .comp-searchfield {
    display: none;
    min-width: var(--ds-component-searchfield-min-width);

    @container body (width > 50rem) {
      display: block;
    }

    form {
      display: flex;
      align-items: center;
      gap: var(--ds-component-searchfield-gap);
    }

    #searchfield {
      border-radius: var(--ds-component-searchfield-radius);
    }

    button {
      width: var(--ds-component-searchfield-button-width);
      height: var(--ds-component-searchfield-button-height);
      background-color: var(--ds-component-searchfield-color-background-button);
      color: var(--ds-component-searchfield-color-content-button);

      padding: var(--ds-component-searchfield-button-padding);
      cursor: pointer;
      flex-shrink: 0;
      border-radius: var(--ds-component-searchfield-radius);
    }
  }
}