@use "variables";
@use "drag-drop";
@use "sortgrid";
@use "buttons";
@use "forms";
@use "aside";
@use "not-found";
@use "sites";
@use "sections";
@use "themes";
@use "shop";
@use "login";
@use "account";
@use "popup";
@use "media";
@use "entry-gallery-editor";
@use "entry-gallery-image-editor";
@use "background-gallery-editor";

html,
body {
  font-size: 16px;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: AvenirNext, Helvetica, Arial, sans-serif;
}

button {
  border: 0;

  &:focus {
    outline: none;
  }
}

header {
  background-color: variables.$black;
  height: variables.$bt-header-height;

  a {
    color: variables.$grey-30;
    font-size: variables.$bt-header-font-size;
    line-height: variables.$bt-header-line-height;
    padding: variables.$bt-header-item-padding;
    text-decoration: none;
    transition: color 0.2s;

    &:hover {
      color: variables.$berta-accent;
    }

    &.nav-active {
      color: variables.$white;
    }
  }

  .bt-view-editor {
    align-items: center;
    background-color: variables.$grey-90;
    color: variables.$grey-40;
    cursor: pointer;
    display: flex;
    padding: variables.$bt-header-item-padding;
    transition: background-color 0.2s;

    path {
      fill: variables.$grey-30;
    }

    &:hover {
      background-color: variables.$berta-accent;
    }
  }
}

berta-profile-dropdown {
  background-color: variables.$black;

  .bt-profile-anchor {
    background-color: inherit;
    min-width: 9.375rem;

    &:focus {
      color: variables.$white;
    }
  }

  ul {
    background-color: variables.$black;
  }

  .bt-profile-anchor,
  ul > li > * {
    align-items: center;
    background-color: transparent;
    box-sizing: border-box;
    color: variables.$grey-30;
    display: flex;
    font-size: variables.$bt-header-font-size;
    justify-content: space-between;
    line-height: variables.$bt-header-line-height;
    padding: variables.$bt-header-item-padding;
    text-align: left;
    text-decoration: none;
    transition: color 0.2s;

    svg {
      path {
        fill: variables.$grey-30;
        transition: fill 0.2s;
      }
    }

    &:hover {
      color: variables.$berta-accent;

      svg {
        path {
          fill: variables.$berta-accent;
        }
      }
    }
  }
}

.overlay {
  background: rgba(variables.$black, 0.3);
}
