@use 'sass:map';
@use '@tutorbook/styles/config';
@use '@tutorbook/styles/typography';

@mixin header {
  @include typography.typography('headline6');
  color: map.get(config.$colors, 'foreground');
  font-weight: 600;
  margin: 24px 0 16px;
}

@mixin field {
  margin: 8px 0;
  width: 100%;
  display: inline-flex;

  textarea {
    resize: vertical;
  }

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }

  :global(.mdc-select__anchor) {
    width: 100%;
  }

  &:global(.mdc-select > .mdc-menu > .mdc-list > .mdc-list-item) {
    white-space: nowrap;
  }
}

@mixin button {
  margin: 8px 0 0;
  width: 100%;
}

@mixin error {
  color: map.get(config.$colors, 'error');
  font-weight: 450;
  margin-top: 16px;
}