@define-color card_border @card_shade_color;

inline-stack-switcher {
  background: alpha(currentColor, .1);
  border-radius: 9px;
  padding: 3px;
}

inline-stack-switcher button {
  border-radius: 6px;
  padding: 2px 15px;
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: outline-color, outline-width, outline-offset, background, box-shadow;
}

inline-stack-switcher:not(.compact) button {
  min-width: 100px;
}

inline-stack-switcher button:checked {
  background: alpha(@card_bg_color, 2);
  color: @card_fg_color;
  box-shadow: 0 1px 3px 1px alpha(black, .07),
              0 2px 6px 2px alpha(black, .03);
}

inline-stack-switcher separator {
  margin: 3px 1px;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

inline-stack-switcher separator.hidden {
  opacity: 0;
}

gridview#style-grid {
  background: @window_bg_color;
}

gridview#style-grid child {
  margin: 6px 6px 6px 6px;
}

gridview#style-grid child:selected {
  background: @window_bg_color;
}

gridview#style-grid child:hover {
  background: @window_bg_color;
}

gridview#style-grid child picture {
  border-radius: 12px;
  box-shadow: 0 0 0 1px @borders;
}

gridview#style-grid child:selected picture {
  box-shadow: 0 0 0 3px @theme_selected_bg_color;
}

gridview#style-grid child:focus {
  outline-style: none;
}

gridview#style-grid child:focus picture {
  outline: 0 solid transparent;
  outline-color: alpha(@theme_selected_bg_color, .5);
  outline-width: 2px;
  outline-offset: 2px;
  transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

gridview#style-grid child image#indicator {
  opacity: 0;
}

gridview#style-grid child:selected image#indicator {
  color: @theme_selected_bg_color;
  opacity: 1;
}
