button.main {
  display: flex;
  transition:
    width 200ms,
    background-color 500ms,
    color 500ms,
    border-color 500ms;
  max-width: var(--size-40);
  flex-direction: row;
  overflow: hidden;
  height: var(--pos-navigation-bar-height);
  width: var(--pos-navigation-bar-height);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--pos-subtle-text-color);
  border: var(--size-px) dashed var(--pos-subtle-text-color);
  background-color: var(--pos-background-color);

  p {
    padding: 0;
    margin: 0;
    display: none;
    white-space: nowrap;
  }

  &.success {
    color: var(--color-green-700);
    border-color: var(--color-green-700);
    border-style: solid;
    background-color: var(--color-green-100);
  }

  &:active {
    transform: scale(0.99);
    filter: brightness(90%);
  }
  &:focus {
    outline: var(--pos-input-focus-outline);
  }
}

svg {
  display: inline-block;
  height: var(--size-6);
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--size-6);
}

button.main:hover,
sl-dropdown[open] button {
  &.success {
    background: var(--color-green-200);
    color: var(--color-green-700);
  }
  width: var(--size-full);
  height: var(--pos-navigation-bar-height);
  background: var(--pos-background-color);
  color: var(--pos-normal-text-color);

  p {
    display: inline-block;
  }
}