/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Styles for portal/misc/partials/app-header.html */

app-header,
app-header-two-way-bind {
  .app-header {
    background: rgb(66, 66, 66);
    box-shadow: 0 1px 1px 0 @grayscale5;

    h1.app-title {
      font-weight: 200;
      font-size: 20px;
      margin: 10px 0;
      color: @white;

      .material-icons {
        color: @white;
        font-size: 20px;
      }
    }

    .md-subheader-inner {
      padding: 0 16px;
      width: 100%;

      .md-subheader-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .link-div {
          float: right;
          color: @white;
          text-transform: lowercase;

          &::first-letter {
            text-transform: uppercase;
          }

          a {
            color: @white;

            &:hover {
              color: @white;
            }
          }

          @media (max-width: @sm) {
            i.fa {
              font-size: 20px;
            }
          }

          i.fa-gear {
            font-size: 20px;
          }
        }

        add-to-home {
          .link-div {
            text-transform: none;

            &::first-letter {
              text-transform: none;
            }
          }
        }

        .md-button {
          margin: 0 8px;
          color: @white;
          min-width: 0;

          .material-icons {
            color: @white;
          }

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

          > a {
            color: @white;

            &:hover {
              color: @white;
            }
          }

          @media (max-width: @sm) {
            min-width: inherit;
          }
        }
      }

      @media (max-width: @xs) {
        padding-right: 0;
      }
    }
  }
}