/*
   Plugin Name: Ungjobb
   Description: Empowering Young People to Find Their Dream Jobs
   Version: 1.0
   Author: Geir Juul Aslaugberg og Jørgen Hermanrud Fjeld
   Author URI: [https://bgo.oslo.kommune.no/jobbsokemotor-for-ungdom/ungjobb/]
   Date: 2024-01-12
*/

.ungjobb p {
   margin-top: 3px;
   /* Reduces space above each paragraph */
   margin-bottom: 3px;
   /* Reduces space below each paragraph */
}

.ungjobb form {
   position: relative;
   width: 30rem;
   background: var(--color-brand);
   border-radius: var(--rad);
}

.ungjobb input,
.ungjobb button {
   height: var(--height);
   font-family: var(--font-fam);
   border: 0;
   color: var(--color-dark);
   font-size: 1.8rem;
}

.ungjobb input[type=search] {
   outline: 0;
   width: 100%;
   background: var(--color-light);
   padding: 0 1.6rem;
   border-radius: var(--rad);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   transition: all var(--dur) var(--bez);
   transition-property: width, border-radius;
   z-index: 1;
   position: relative;
}

.ungjobb button {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   width: var(--btn-width);
   font-weight: bold;
   background: var(--color-brand);
   border-radius: 0 var(--rad) var(--rad) 0;
}

.ungjobb input:not(:-moz-placeholder-shown) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

.ungjobb input:not(:-ms-input-placeholder) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

.ungjobb input:not(:placeholder-shown) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

.ungjobb input:not(:-moz-placeholder-shown)+button {
   display: block;
}

.ungjobb input:not(:-ms-input-placeholder)+button {
   display: block;
}

.ungjobb input:not(:placeholder-shown)+button {
   display: block;
}

.ungjobb label {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
}