/* translate widget loader */
#google_translate_element {
  font-size: var(--font-size-sm, 0.875rem);
}

/*official*/
.official-header {
  background-color: var(--gray-50, #fafafa);
  padding: 0;
  width: 100%;

  @media (max-width: 767px) {
    width: 100vw;
    padding: var(--s-1, 0.5rem) 0;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    max-width: var(--w-lg, 1176px);
    min-height: 40px;
    margin: 0 auto;
    padding: 0 var(--s-2, 1rem) 0 var(--s-2, 1rem);
  }

  .official-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .cagov-logo {
      margin: 0 0 0 0;
      display: flex;
    }
  }

  svg {
    padding: 0;
    width: 33px;

    .ca {
      fill: var(--cagov-highlight, #fec02f);
    }
    .gov {
      fill: var(--cagov-primary-dark, #003484);
    }
  }

  .official-tag {
    margin: 0 var(--s-1, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    display: inherit;
  }

  .official-languages a {
    color: var(--black, #000);
    padding: 0 var(--s-1, 0.5rem) 0 var(--s-1, 0.5rem);
    text-decoration: underline;

    &:hover {
      color: var(--black, #000);
      text-decoration: none;
    }
    &:focus {
      outline: 2px solid var(--accent2-500, #ac8226);
    }
  }

  .official-languages {
    display: flex;
    flex-wrap: wrap;
    .dropdown {
      position: relative;
    }
    // languages button
    button.offcial-more {
      padding-right: 0;
      border: none;
      text-decoration: underline;
      color: var(--black, #000);
      background-color: var(--white, #fff);
      text-decoration: underline;
      transition: transform 0.3s;

      &:hover {
        color: var(--black, #000);
        text-decoration: none;
      }
      &:focus {
        outline: 2px solid var(--accent2-500, #ac8226);
      }
      &[aria-expanded="false"] {
        .caret-down {
          transition: all 0.3s;
          svg {
            padding: 0 0 0 0;
            width: 20px;
            height: 18px;
            overflow: visible;
            position: relative;
            right: 5px;
          }
        }
      }
      &[aria-expanded="true"] {
        .caret-down {
          transition: transform 0.3s;
          svg {
            padding: 0 0 0 0;
            width: 20px;
            height: 18px;
            position: relative;
            top: 8px;
            left: 4px;
            overflow: visible;
            transform: rotate(180deg);
          }
        }
      }
    }

    .dropdown-content {
      background-clip: padding-box;
      background-color: var(--white, #fff);
      border: 1px solid var(--gray-200, #d4d4d7);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      border-radius: var(--radius-2, 4px);
      padding: var(--s-2, 1rem);
      position: absolute;
      right: 0px;
      top: 100%;
      text-align: left;
      z-index: 1000;
      min-width: 150px;
      display: none;
      &.show {
        display: flex;
        flex-direction: column;
      }
    }
  }

  /* google translate */
  .goog-te-gadget {
    max-height: 42px;
    overflow: hidden;

    .goog-te-combo {
      /* hardcoded translate widget stuff from cannabis site */
      background-color: #fff;
      border: 1px solid #bbb;
      padding: 0.25rem;
      color: #4e4e4e;
    }
  }
  .goog-logo-link {
    display: none;
  }
  #google_translate_element .skiptranslate.goog-te-gadget,
  .skiptranslate.goog-te-gadget a {
    color: white;
  }
  .goog-te-gadget {
    margin-bottom: -10px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
  }
}
.desktop-only {
  display: none;
}

@media screen and (min-width: 800px) {
  .desktop-only {
    display: inline;
  }
}
