@use "includes/base.sass"
@use "includes/colors.sass" as c
@use "sass:selector"
@use "includes/video-page.sass"
@use "includes/search-page.sass"
@use "includes/home-page.sass"

@font-face
  font-family: "Bariol"
  src: url(/static/fonts/bariol.woff)

@mixin button-base
  appearance: none
  -moz-appearance: none
  color: c.$fg-bright
  border: none
  border-radius: 4px
  padding: 8px
  margin: 0
  text-decoration: none
  line-height: 1.25

  @at-root #{selector.unify(&, "select")}
    padding: 7px 27px 7px 8px
    background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x

  @at-root #{selector.unify(&, "a")}
    padding: 7px 8px

  .button-icon
    position: relative
    top: 3px
    margin-right: 8px
    margin-left: 2px

@mixin button-bg
  @include button-base

  background-color: c.$bg-accent-x

@mixin border-button
  @include button-bg

  border: 1px solid c.$edge-grey

@mixin button-size
  margin: 4px
  font-size: 16px

@mixin button-hover
  &:hover
    background-color: c.$bg-accent

  &:active
    background-color: c.$bg-dark

.base-border-look
  @include border-button

.border-look
  @include border-button
  @include button-size
  @include button-hover

.main-nav
  background-color: c.$bg-accent
  display: flex
  padding: 8px
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)

  .link
    @include button-base
    text-decoration: none
    margin: 1px 8px 1px 0px
    font-size: 20px

    &.home
      font-weight: bold

    &, &:visited
      color: #fff

    &:focus, &:hover
      background-color: c.$bg-accent-x

  .search-form
    display: flex
    flex: 1
    align-items: center

    .search
      @include button-bg
      padding: 10px
      flex: 1
      margin: 1px

      &:hover, &:focus
        border: 1px solid c.$edge-grey
        margin: 0px