src/SW.scss
@use './scss/variables' as var;

.sw {
  margin-top: var.$padding-md;
  font-size: var.$font-size-sm;
  flex: 0 0 auto;
  width: 3.84rem;
  display: flex;
  backdrop-filter: var.$filter;

  &-reverse {
    margin-top: 0;
    margin-bottom: var.$padding-md;
  }

  &-text {
    flex: 1 1 auto;
    min-width: 0;
    height: var.$size-form;
    line-height: var.$size-form;
    color: var(--color-encounter-fg);
    background-color: var(--color-encounter-bg);
    text-shadow: var(--shadow-encounter);
    white-space: nowrap;
    overflow: hidden;
    padding: 0 var.$padding-xl;
    text-align: center;
  }

  &-btn {
    color: var(--color-cover-fg);
    background-color: var(--color-cover-bg);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    height: var.$size-form;
    width: var.$size-form;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    &:hover {
      color: var(--color-form-fg-active);
      background-color: var(--color-form-bg-active);
    }
  }
}
