/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.text-yellow {
	color:hsla(44, 94%, 59%, 1);
}

.link-hover a {
    position: relative;
}

.link-hover a:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 1px;
    background-color: #4B4949;
    width: 0;
    transform: translateX(-50%); 
    transform-origin: center;
    transition: width 0.25s cubic-bezier(.215, .61, .355, 1); 
}

.link-hover a:hover:after {
    width: 100%;
}

.quick-flip {
  --transition-duration: 0.325s;
  --timing-function: cubic-bezier(0.66, 0, 0.34, 1);
  /*   --timing-function: linear(0, 0.234 11.8%, 0.403 18.4%, 0.624 24.7%, 0.999 33.3%, 0.76 39.9%, 0.705 42.6%, 0.687 45.2%, 0.703 47.7%, 0.753 50.3%, 0.999 57.7%, 0.89 61.8%, 0.865 63.6%, 0.857 65.3%, 0.865 67%, 0.887 68.8%, 0.999 74.5%, 0.957 77.5%, 0.944 80.2%, 0.954 82.7%, 1 88.2%, 0.988 91.9%, 1); */

  overflow-y: clip;

  > * {
    /* inline elements can't use transforms */
    display: block;

    /* the transform is moving it up
       then the translate has a  */
    transition: transform var(--transition-duration) var(--timing-function),
      translate 0ms calc(var(--transition-duration) / 2);
  }

  &:is(:hover, :focus-within) > * {
    transform: translateY(-2lh);
    translate: 0 2lh;
  }

  &:focus-within {
    outline: 2px solid var(--teal);
    border-radius: 4px;

    > *:focus {
      outline: none;
    }
  }
}