JS-Tech/resj

@import "../global/variables";

.admin-layout-top {
  width: 100%;

  .logo {
    max-width: $content-width;
    margin: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    img {
      max-width: 200px;
      padding: 20px;
      margin-top: 10px;
    }

    .text {
      padding: 0 20px 0 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;

      a {
        text-decoration: none;
        color: #000;
        border: 2px solid $color-green;
        padding: 8px 10px;
        font-size: 14px;
        margin: 2px;

        &:not(:first-of-type) {
          margin-left: 7px;
        }

        &:hover {
          color: white;
          background-color: $color-green;
          transition: all 100ms;
        }
      }
    }
  }

  .pattern {
    background-image: image-url("session/motif.jpg");
    min-height: 60px;
    width: 100%;

    .wrapper {
      max-width: $content-width;
      margin: auto;
      padding: 20px 0 20px 55px;
      display: flex;
      flex-wrap: wrap;

      a {
        color: #000;

        &:not(:last-of-type) {
          padding: 0 20px 0 0;
        }
      }
    }
  }

  @media only screen and (max-width: $mobile-width) {
    .logo {
      img {
        max-width: 100%;
        width: 75px;
        padding: 0px;
        margin: 8px 8px 8px $mobile-padding;
      }

      .text {
        padding: 0 20px 0 0;
      }
    }
  }
}