<style lang="scss" scoped>
@import "@/assets/scss/ds-system/ds-system";

.header {
  position: relative;

  display: flex;
  align-items: center;

  padding: 15px 12px;

  background-color: $blue-600;
  box-shadow: 0 2px 4px $shadow-400;

  &__logo {
    margin-right: auto;
  }

  &__search {
    position: relative;

    margin-right: 18px;

    input {
      @include m-s14-h21;

      margin: 0;
      padding-top: 11px;
      padding-right: 11px;
      padding-bottom: 11px;
      padding-left: 40px;

      color: $white-900;
      border: 1px solid $white-800;
      border-radius: 6px;
      background-color: transparent;
    }

    button {
      position: absolute;
      top: 50%;
      left: 11px;

      overflow: hidden;

      width: 17px;
      height: 17px;
      padding: 0;

      transform: translateY(-50%);

      color: transparent;
      border: none;
      outline: none;
      background-color: transparent;
      background-image: url("@/assets/img/icon-search.svg");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  &__create-task {
    @include m-s14-h21;

    margin-right: 18px;
    padding-top: 13px;
    padding-right: 14px;
    padding-bottom: 11px;
    padding-left: 14px;

    transition: background-color 0.3s;
    text-transform: uppercase;

    color: $black-700;
    border-radius: 6px;
    background: $white-800;
    box-shadow: 0 4px 8px $shadow-500;

    &:hover {
      background-color: $yellow-300;
    }
  }

  &__login {
    @include m-s14-h21;

    position: relative;

    padding-left: 28px;

    cursor: pointer;

    color: $white-900;

    &::before {
      position: absolute;
      top: -3px;
      left: 0;

      width: 16px;
      height: 21px;

      content: "";

      background-image: url("@/assets/img/login.svg");
    }
  }

  &__user {
    cursor: pointer;

    img {
      display: block;

      width: 40px;
      height: 40px;

      border-radius: 50%;
    }
  }

  &__menu {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;

    display: none;
  }
}
</style>

<style lang="scss" scoped>
.app_layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
</style>